CODEWITHSUNDEEP
csstwitter-bootstrapmaterial-designangular-material2
Lev
Lev

Reputation: 15684

does angular material have a grid system?

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.

Upvotes: 31

Views: 24713

Answers (4)

Mauricio Rivera
Mauricio Rivera

Reputation: 84

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.

Upvotes: 0

ToastedSoul
ToastedSoul

Reputation: 1296

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
}

Upvotes: 16

user7154703
user7154703

Reputation:

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.

Upvotes: 16

Nehal
Nehal

Reputation: 13307

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>

Upvotes: 20

Related Questions