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

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

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 comes in and that’s what I want to focus on.

Angular Flex

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 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 (with Angular Material) Better than Bootstrap for Responsive Layout?
Breaking Points for Angular Flex

The beauty of Angular flex 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>

In Angular flex:

<div flex fxLayout="row">
<div fxFlex="50" ></div>
<div fxFlex="33" ></div>
<div fxFlex="17" ></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""column">
<div fxFlex="50" ></div>
<div fxFlex="33" ></div>
<div fxFlex="27" ></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>

To get a feeling of what Angular flex can do, visit the following live demo here.

With Angular flex, 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'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.


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, you can use either Yarn or NPM with the following commands

yarn add @angular/[email protected] or npm install @angular/[email protected]

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.


To conclude, Angular Material and Angular Flex 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 for responsive design.

6 Replies to “Is Angular Flex (with Angular Material) Better than Bootstrap for Responsive Layout?”

  1. I have been able to get the results I want using Angular Flex, and it has become part of my regular stack. In my opinion, the “demo” page lacks the interactivity needed to be truly useful. I prefer the wiki at It’s not really interactive, but it’s more complete, current and useful to me nevertheless.

    With Angular Flex, sometimes my markup still gets cluttered with layout though. Like bootstrap or foundation, I sometime need to add some intermediate divs to get the children to do what I want. I would hesitate to say it’s better than bootstrap based only on the grid system. But when you consider the Angular components, Icons, layout and theming, it’s an excellent toolkit.

    I recently saw some super-clean HTML in a project that used CSS Grid. There’s no MS browser support for it, but there will be certain places where I can afford that. I look forward to exploring that.

    Thanks for your post.

Leave a Reply

Your email address will not be published. Required fields are marked *