Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to integrate MaterializeCss into Bootstrap

I have asked myself (not tested) if it is possible to integrate both bootstrap and materializecss into the same project

Since both frameworks are for the same purpose and probably overlapping in some class definitions etc. is it still possible to combine both frameworks in order to expand my styling options?

like image 786
Nickolaus Avatar asked Feb 19 '15 18:02

Nickolaus


People also ask

Can I use both materialize and Bootstrap?

Can you use Materialize and Bootstrap together? Technically, it's possible to use both Bootstrap and Materialize together but you need to be extra careful with the names of the classes. Keep in mind that there many are the same and could result in performance issues.

Which is better materialize or Bootstrap?

The main difference is that Bootstrap gives you more freedom and control over UX elements; Materialize is more opinionated about how UX elements should behave and look, which is to be expected, since the purpose of Materialize is to help you conform your code to Material Design.

How do you use MaterializeCSS?

There are two ways to use MaterializeCSS, either you can download the files on your system or use the files from CDN (Content Delivery Network). Download the Materialize Package. Download the Materialize SASS Package.

Is materialize responsive?

Materialize has several classes to make images and videos responsive to different sizes. responsive-img − It makes an image to resize itself based on the screen size. video-container − For responsive container having embedded videos.


2 Answers

Materialize is not based on Bootstrap nor just a "visual layer", using both frameworks may lead to a lots of incompatibilities or at least overlap a lot as most of their functionalities are redundant (grids, menus, icons, etc).

I personally use this project Bootstrap material design which is a theme for Bootstrap and works very well. If you don't need/want Bootstrap you can also use Material Design Lite that has been recently released by Google. It is a light CSS framework based on Material Design guidelines. Light in comparison to Angular Material or Polymer also using Material Design guidelines but part of or requiring other javascript frameworks (i.e. Angular).

like image 95
Guillaume Avatar answered Sep 23 '22 00:09

Guillaume


I added Materialize to my bootstrap website and it worked fine, like JC Borlagdan said though there is some overlapping. I just use a website inspector and (usually right click > inspect element) then just turn off the bootstrap or materialize property to see which one I like more and remove the styling from the one I don't like. Just make sure you get the non minified versions of materialize and bootstrap.

like image 29
Brian Purgert Avatar answered Sep 27 '22 00:09

Brian Purgert