31

I'm starting a project with angular material. Does it have a native system for positioning elements in a responive grid like bootstrap does ?

Otherwise is it ok practice to combine material design with bootstrap for the grid system ?

Maybe I am taking the wrong aproach to the problem.

Nehal
  • 13,130
  • 4
  • 43
  • 59
Lev
  • 13,856
  • 14
  • 52
  • 84

4 Answers4

20

If you are using Material2, you can use Angular Flex Layout for responsiveness. It compliments Angular2 well and is lightweight.

Basically Material2 + Flex-layout is equivalent to Bootsrap library.

Here's an example of how flex-layout can be used for grid system/responsiveness with Angular/Material2.

Sample Code showing use of flex-layout API:

<div fxShow.xs="true" fxShow="false" >Screen size <h1>XS</h1></div>
    <div fxShow.sm="true" fxShow="false" >Screen size <h1>SM</h1></div>
    <div fxShow.md="true" fxShow="false" >Screen size <h1>MD</h1></div>
    <div fxShow.lg="true" fxShow="false" >Screen size <h1>LG</h1></div>
    <div fxShow.xl="true" fxShow="false" >Screen size <h1>XL</h1></div>

    <div fxLayout="row" 
         fxLayout.xs="column"
         fxLayoutGap="10px"
         fxLayoutAlign.xs="center center"
         fxLayoutWrap>
      <div class="sample-div" fxFlexOrder.lt-md="7">Div 1</div>
      <div class="sample-div" fxFlexOrder.lt-md="6">Div 2</div>
      <div class="sample-div" fxFlexOrder.lt-md="5">Div 3</div>
      <div class="sample-div" fxFlexOrder.lt-md="4">Div 4</div>
      <div class="sample-div" fxFlexOrder.lt-md="3">Div 5</div>
      <div class="sample-div" fxFlexOrder.lt-md="2">Div 6</div>
      <div class="sample-div" fxFlexOrder.lt-md="1">Div 7</div>
      <div class="sample-div" fxFlexOrder.lt-md="0">Div 8</div>
    </div>
Nehal
  • 13,130
  • 4
  • 43
  • 59
  • I don't think where this is correct `Basically Material2 + Flex-layout is equivalent to Bootsrap library.`? Because of `Flex-layout` is only provide a Grid system. But Boostrap provides so many other layout options such as `Container` and `Utility` classes and etc. – Sampath Dec 05 '19 at 11:45
  • 4
    why can't we just admit it, the answer is NO, angular material doesn't have a css style grid system. – yww325 Sep 06 '20 at 16:53
16

This site describes how to add the bootstrap grid to a Angular Material project: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

A summary of the steps described in the article:

Add bootstrap to your project:

npm install bootstrap --save

src/styles.scss:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

@import 'variables';

// Imports functions, variables, and mixins that are needed by other Bootstrap files
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
// Import Reboot
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/grid'; // add the grid
@import '~bootstrap/scss/utilities'; // add css utilities

@import 'reset';

src/_variables.scss:

The _variables.scss Sass partial allows us to customize Bootstrap - more precisely, the parts of Bootstrap that we will be using

$link-color: #3f51b5;
$link-hover-color: currentColor;
$link-hover-decoration: none;

$grid-breakpoints: (
  xs: 0, // handset portrait (small, medium, large) | handset landscape (small)
  sm: 600px, // handset landscape (medium, large) | tablet portrait(small, large)
  md: 960px, //  tablet landscape (small, large)
  lg: 1280px, // laptops and desktops
  xl: 1600px // large desktops
);

$container-max-widths: (
  sm: 600px,
  md: 960px,
  lg: 1280px,
  xl: 1600px
);

src/_reset.scss:

The _reset.scss Sass partial allows us to override some of the Bootstrap styles we don't want

* {
  &:active,
  :focus {
    outline: none !important;  // 1
  }
}

label {
  margin-bottom: 0; // 2
}


a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
  color: #3f51b5; // 3
}
ToastedSoul
  • 1,296
  • 1
  • 17
  • 27
14

Looks like Angular Material (7.0.3) still do not have solid grid system like bootstrap, else they would have included it in their official documentation

and we still need to use Anuglar Material because of richer UI/UX.

solution is to take only grid part from bootstrap.

stylesheetbootstrap-grid.css can be used as mentioned in bootstrap documentation or corresponding cdn can be used to utilize bootstrap provided grid functionality.

0

Because Angular Material lacks of a Grid system, You can create one by your own using Bootstrap 5 wrapping it into Angular components. It's an example of a nested Grid you can have by creating your own grid components:

<box containerFluid>
  <box row [spacingY]="4">
    <box [md]="4">
      <box row>
        <box [md]="6"> Item </box>
        <box [md]="6">
          <box row>
            <box [md]="6"> Item </box>
            <box [md]="6"> Item </box>
          </box>
        </box>
      </box>
    </box>
    <box [md]="4"> Item </box>
    <box [md]="4"> Item </box>
    <box [md]="6">
      <box row>
        <box [md]="6"> Item </box>
        <box [md]="6"> Item </box>
      </box>
    </box>
    <box [md]="3"> Item </box>
    <box [md]="3">
      <box row>
        <box [md]="6"> Item </box>
        <box [md]="6"> Item </box>
      </box>
    </box>
  </box>
</box>

The full working example is on this video. You can have column spacing, breakpoints, margin, paddings and gutters. All what you need for a basic grid system.

Mauricio Rivera
  • 84
  • 5