Material design input with bootstrap-4

Question

I am creating a vue webapp and using bootstrap-4 as CSS framework. I want to have input fields like material design, But bootstrap have only older design of input fields with border on all sides and no floating label.

What can be best way to get this done?

Answer 1

You should overwrite standard Bootstrap rules with one you need - very simple process.

There are Bootstrap Material, but I think it's for version 3

http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

But you can take rules from here, for partial that you need, and paste it to your custom CSS.

Answer 2

You may customize what resources you want from bootstrap, doing it you might not have incompatibility with 2 frameworks breaking css each other...

http://getbootstrap.com/customize/

you may try getting resources like grids... something that will not break material design...

I already did it.