40

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?

6 Answers 6

51

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).

7
  • 2
    thanks looks good,... only disadvantage that you will loose all the original bootstrap styling since it is just a bootstrap theme
    – Nickolaus
    Feb 19, 2015 at 18:38
  • Yes the its just a boostrap theme part is ugly.
    – tony
    Apr 28, 2015 at 1:25
  • 4
    Checked Bootstrap material design I am not comfortable. Font files mentioned in documents were not found. Also, one has to pay for using for commercial purpose. Checked Google Material Design Lite looks promising. Nov 30, 2015 at 6:04
  • @TejasviHegde Does it still say you need to pay if using for commercial purpose? I don't see that now.
    – Menasheh
    Feb 22, 2017 at 22:04
  • @Menasheh I had re-look at the project since its been long time that I checked. the project github.com/FezVrasta/bootstrap-material-design and found that can use it in any kind of project including commercial one. Feb 23, 2017 at 6:17
14

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.

1

It is possible, I already tested both framework in a single web form, though some properties of the controls overlapped, especially to the <div> tag that calls the container class for the tag.
For the grid, it actually follows still the bootsrap, for some reason, (that I don't know). Because I tried rearranging the order of <script> tags, still bootsrap grid still the one used by the webpage/webform.

1

you need to set the order of CSS files like

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>

Now you can override bootstrap css classes or ids, and can make your own CSS styles.

3
  • I know but if you use both frameworks one will always overwrite functionality of the other one
    – Nickolaus
    Apr 29, 2015 at 6:46
  • 1
    i dont think so there is any method to merge / Integrate two CSS files
    – khurram
    Apr 29, 2015 at 6:57
  • 1
    yes I agree.... my only idea for a solution I came up with (until now) would be writing a custom compiler which checks double entries and makes aliases for these cases, you will have redundancies, but I think it should be possible
    – Nickolaus
    Apr 29, 2015 at 13:17
1

You could remove the GRID from materialize.css and just compile a custom bootstrap package with BT GRID and without the buttons, labels etc.

Don't use any BT jQuery Plugin, then compile and load bootstrap.min.css first in your template and then the modded materialize.css and materilize.min.js.

You can also integrate just buttons, cards or colors by picking them out of materialize.css and insert in your template.css / style.css to overwrite bootstrap styles or to add alternative css classes to your GRID.

0

I'm not sure that's possible. Material Design is something new from Google, and includes responsive as part of it, while the Bootstrap library is from Twitter and seems to be mostly responsive-oriented.
Check out this conversation : http://forums.oscommerce.com/topic/407994-material-design/?hl=material
I suspect that they are not going to be integrated with each other, and will conflict badly, but maybe someone else has more information.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.