Can Bootstrap (4) be integrated along with Angular Material (2)?

Question

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 lightwei

Answer 1

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:

  

    

      One of three columns
    
    

      One of three columns
    
    

      One of three columns
    
  

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/