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 style.scss:

 // 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:

Component Development Kit

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.

Responsive goddies

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.

Browsers support

Material 2: IE11+
Bootstrap 4 IE10+
Bootstrap 3 IE8+

Bootstrap + Material ?

It is up to you if you want to combine both Frameworks in your app. If you do that check the bundle size to make sure it is not bloated.

While Kuncevic's answer is right, I think we should also add the following:

• Angular Material is implicitly upgrading/downgrading DOM elements
  while Bootstrap is not. That means that in Bootstrap, you get what
  you see, while in Angular Material, some elements are automaticallyrendered. So, I can't really see how you can combine the two, even ifyou want to. Adding, Angular's view encapsulation in the mix, things get even messier.
• The only part where I see room for cooperation is in the grid. You
  could use Bootstrap for the grid and Angular Material for the rest, but with Angular FlexLayout (as Kunsevic already mentioned) you don't really need to.There is a small learning curve there, but it is worth it, if you useAngular.
• Bootstrap's CSS does conflict with Angular Material's CSS. When usedtogether I have noticed that certain elements like icons insidefloating buttons are not centered correctly, etc. This shouldn't be adifficult fix, but why bother when you can use Angular Flex?

Hope that helps.