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

| By Maina Wycliffe | | | Angular

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>

In Angular Flex Layout

<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 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 **"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.


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/[email protected]
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 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.

NgRev – Analyze and Profile your Angular App

NgRev is a graphical tool designed to reverse engineer your Angular application. It is not a browser extension like Augury, but a standalone …

Read More
Augury – A Tool to Debug and Profile your Angular App

Augury is an open source tool available to Google Chrome that was developed by Google in conjunction with Rangle.IO for debugging and …

Read More
Angular 5 – Handling Token Based Authentication

Token based authentication is popular for single page applications. A token is a security code issued by a server for authenticating and …

Read More
How to build a HTTP Interceptor in Angular 5

Introduction A HTTP Interceptor enables you to catch HTTP requests and responses so that you can modify them. It is very useful especially …

Read More
Image Sliders and Carousels for Angular 4

Web developers require from time to time to create different types of images sliders and carousel in their apps. Most developers coming from …

Read More
How to upgrade your Angular 4 App to Angular 5.0

Angular 5 was finally released earlier this week after several delays. It brings a lot of improvements over Angular 4 and new features as …

Read More