First before I can say anything else, I want to express my huge respect and love for Bootstrap. I am not writing this to bash bootstrap in any way, in fact bootstrap is one of the most robust frontend framework I have ever used. A few years ago, Google announced a new designed language when they released Android 5 (Marshmallow) and since then, it has been spreading like wildfire. If you wanted to use Material design in Angular, you use Angular Material. Angular Material is in simple terms is a set of components (i.e. Date Picker, Cards, Toolbar etc.)  with the material design aesthetic. On its own, Angular Material can not provide a responsive design like bootstrap does. And that’s where Angular Flex Layout comes in and that’s what I want to focus on.

Angular Flex Layout

Bootstrap has a simple grid system divided into 12 sections for different screen sizes – Extra Small (xs), small (sm), medium (md) and large (lg). The extra small (xs) has been removed in Bootstrap 4. Angular Flex Layout on the other hand provides a more robust grid system which relies with CSS flex. The issue with relying on flex is browser compatibility. While most browsers support flex CSS in their latest versions, some earlier versions don’t. This may be problematic if your users have an old incompatible version of browser. In that case, stick with bootstrap. It has 5 regions but with different breaking points for different screen sizes as compared to Bootstrap. Refer to the image below:

Is Angular Flex Layout (with Angular Material) Better than Bootstrap for Responsive Layout?

The beauty of Angular Flex Layout approach is how you define the layout regions in relationship to each other. It is not also limited to 12 regions like bootstrap but rather you can include any unit of measure to define a region. You can use percentage points, pixels, inches to define width, height, margin and its extremely easy to do so. It makes using CSS flex very easy, although coming from bootstrap it took time getting used to it. A good example of this is: Let’s say you want to create a layout with 3 unequal columns:

In bootstrap

<div class="row">
  <div class="col-sm-6"></div>
  <div class="col-sm-4"></div>
  <div class="col-sm-2"></div>
</div>

In Angular Flex Layout

<div flex fxLayout="row">
  <div fxFlex="50"></div>
  <div fxFlex="33"></div>
  <div fxFlex="17"></div>
</div>

As you can see from the sample code, they produce much similar codes but with flex you can use percentage or pixels or anything else for sizes. You can now manipulate the above code for different screen sizes like, arranging them vertically for small devices as shown below:

<div flex fxLayout="row" **fxLayout.lt-sm="column" **>
  <div fxFlex="50"></div>
  <div fxFlex="33"></div>
  <div fxFlex="27"></div>
</div>

You can achieve the same with bootstrap, but that mean repeating the class on all divs as follows:

<div class="row">
  <div class="col-md-6 **col-sm-12" **></div>
  <div class="col-md-4 **col-sm-12" **></div>
  <div class="col-md-2 **col-sm-12" **></div>
</div>

To get a feeling of what Angular Flex Layout can do, visit the following live demo here. With Angular Flex Layout, you can apply specific classes, styles and directives on specific screen sizes or a range of screen sizes as defined here. For example, to apply a class to only small devices, all you have to do is add a .sm to the end of the ngClass name as shown below:

<div **ngClass.sm="class-for-small-devices" **></div>

I am not saying it’s perfect, in fact, it’s far from that. But for a library still in beta it works very well. There are somethings I like in bootstrap like helper classes for boldening text, aligning text, padding, margin among others. But that won’t stop me from switching from Bootstrap to using both Angular Material and Angular Flex Layout.

Requirements

Requirement part is a bit confusing in the official documents because they have stated the following:

  • requires Angular v4.1.x or higher.
  • is currently only available for Angular (v2.x or higher) Applications.

I don’t know which one is which. If you have the latest version of Angular, you are good to go. But, for those still using v2 or v4.0 – please give it a go and comment below on whether It works.

How to Get Started

To install Angular Flex Layout, you can use either Yarn or NPM with the following commands

yarn add @angular/flex@latest
npm install @angular/flex@latest

Then, you have to remember to import it into your project in the app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';

And remember to add it to your list of imports imports. After that you are can use angular/flex for in your projects.

Conclusion

To conclude, Angular Material and Angular Flex Layout are better than bootstrap. This is not to say you shouldn’t use bootstrap, but you should consider using both libraries. Of course, you can still use either independently if you wish to, Angular Material for the nice-looking UI component and Angular Flex Layout for responsive design.