Using Angular Material2 with Bootstrap4 css for grid layouts

Question

Angular Material2 (alpha.7) does not have responsive grid component like bootstrap grid system yet. The layouts/grid system in bootstrap allows creating responsive layouts (that adapt to screen size without having to deal with writing css involving custom media queries and figuring out pixel values for breakpoints) which is immensely useful.

I noticed issues in margin/padding of material2 components on including bootstrap css in a material2 project. For example: md-card components start overlapping.

Is there a way to have these 2 libraries play well together?

OR

Is there a way to get the bootstrap like responsive layout/grid goodness in material2 without including bootstrap css?

I guess they will work together well. Haven't tried it before. — Mithun Pattankar, Aug 20 '16 at 04:07
why you want to bring bootstrap grid layout to material2 if you can just use https://github.com/angular/flex-layout ? This way you can forget about bootstrap at all. — angularrocks.com, Aug 24 '17 at 23:48

score 4 · Answer 1 · answered Oct 07 '16 at 07:10

Bootstrap and Material2 do play well together (almost). The issue that I was facing with strange padding/margin was because I was trying to use grid list component and Bootstrap grid system together and the issue was resolved after I stopped using grid-list and switched entirely to Bootstrap for row/column layouts. Then, I was then able to use other material2 components like md-card, etc without layout issues.

If using Bootstrap avoiding use of the material2 grid-list component or vice versa may be a good idea. I am not entirely sure why this issue happens but it happened in my case.

Alternatively, it may be worthwhile learning CSS3 Flexbox for more powerful layout management that would eliminate the need to use Bootstrap or grid-list.

For completeness, the current recommended solution for layout with Angular Material 2 is @angular/flex-layout, which is an Angular abstraction of CSS Flexbox coupled with some responsive layout directives. — Red3, Oct 17 '17 at 20:21

score 3 · Answer 2 · edited May 23 '17 at 12:02

I think you can compile only Bootstrap 4's Sass code for the grid in a single CSS file. And link this CSS in src/index.html file of your Angular Material2.

First compile the CSS code for only the grid (and grid classes). Bootstrap's source code already contains a bootstrap-grid.scss Sass file. As its comments tell you:

// Bootstrap Grid only
//
// Includes relevant variables and mixins for the regular (non-flexbox) grid
// system, as well as the generated predefined classes (e.g., `.col-4-sm`).

You'll have to compile bootstrap-grid.scss instead of bootstrap.scss into CSS code. Notice that Bootstrap requires to run the postCSS autoprefixer.

After compiling the CSS file you can link it in the src/index.html file as follows:

<link href="bootstrap-gridonly.css" rel="stylesheet">

Finally you should check if Angular Material2 also uses a CSS reset. Bootstrap 4 ships with a new Reboot module which is an extension of Normalize.css. The reboot module, and especially the box-sizing: border-box setting, is required for Bootstrap's grid.

Using Angular Material2 with Bootstrap4 css for grid layouts

2 Answers2