I'd like to use Angular Material 2 library, because of its (growing list of) components. But i'm used to bootstrap and it's goodies like responsive utilities and lightweight UI for typical things. By Bootstrap I mostly mean its CSS part, I almost never need its JS functionality.
For example in Material lilbrary there is practically zero styling for list group, while Bootstrap gives that with its css.
I remember reading that combining them is not a good idea, mainly because their global app-wide styles will collide. I can't find that source and I'm curios - is that true with current versions? If so, exactly what is conflicting and how can it be worked around?
Since Bootstrap is modular, one alternative approach could be using Angular Material and then just picking from Bootstrap only the parts that you really need.
Note: whatever you're going to import, you should install bootstrap first:
npm install bootstrap --save
And import the required sass file inside your global
// Imports functions, variables, and mixins that are needed by other Bootstrap files @import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins";
For example, you might want to use Bootstrap Reboot in order to make all browsers render the elements more consistently and following the web standards.
Then you only need to import:
// Import Roboot @import "~bootstrap/scss/reboot";
You probably want to make use of the Bootstrap Grid System as well, in such case you can further add:
@import "~bootstrap/scss/grid"; // add the grid
So you would be able to use it in your html templates:
<div class="container"> <div class="row"> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> </div>
You may also want to use the Bootstrap Utilities, in such case add also:
@import "~bootstrap/scss/utilities"; // add css utilities
My answer is based on what's explained here in details: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/
Angular Material 2 is a new library still in active development so you should not expect many fancy
nice to have features in that, yet, but on the long run you will have a lots of benefits using
Material 2 in you angular app. Here is some overview:
In the last releases
Material 2 team introduced
@angular/cdk which is a core for
Material 2 and also gives developers a great ground to write their own thirdparty components. There is no much docs on
@angular/cdk yet, but you can track that issue https://github.com/angular/material2/issues/2789 to keep updated on that matter.
There is no builtin functionality in
Material 2 that gives you responsive goddies. For that matter you have to use @angular/flex-layout thing is completely separate from
Material 2 - basically it is a nice abstraction on top of Flexbox CSS. Using that you do not have to write whole bunch of responsive css mediaQueries yourself.
Material 2: IE11+
Bootstrap 4 IE10+
Bootstrap 3 IE8+
There is no reason you want to combine both Frameworks in your app if you think about the total size of your bundles having referencing two heavy front end frameworks. Also in that case you have to care about conflicts that may occur using both in the same project.
While Kuncevic's answer is right, I think we should also add the following:
Hope that helps.
In 2019 Angular conference they explained is it ok or not combining bootstrap and angular material. https://www.youtube.com/watch?v=xLj1qw82oAo&feature=youtu.be
©2020 All rights reserved.