Using Bootstrap in Angular

Author: Dawid Adach

-

We will start building our app by setting up the two column structure of our app. As you can see in the demo app our app consists of two columns: the first, on the left and wider, which lists all the daily events; and the right hand one - which shows the events counter as well as the weather forecast.

As you also noticed our app will be responsive. This is thanks to Bootstrap 4. In this lesson, we will learn how to use a Bootstrap grid in Angular.

Disclaimer: I will explain the key concepts and basic usage here. If you want to master Bootstrap usage I strongly suggest to finish this course first and come back here.

1. Open the project

In order to start building our project let's open a boilerplate which I have prepared for you in Tutorial files which you downloaded before.

  1. Open the agenda-app/start-here project in code editor
  2. Replace the content of the src/app.component.html and src/app.component.scss file with the following code:
  3. 
    <div class="container">
      <div class="row mt-3">
        <div class="col-md-6">
          Left column
        </div>
        <div class="col-md-6">
          Right column
        </div>
      </div>
    </div>
          
    
    div[class^="col"],
    div[class*=" col"] {
      border: 1px dotted black;
    }
    
          

    What we did:

  • Added a container, with a row and two columns inside within app.component.html
  • Added a style to make our grid borders visible inside the app.component.scss

1. The concept of the grid

Currently, our app has two equal-sized columns which are placed next to each other on a large screen. When we resize our browser window they will nest one beneath the other:

Bootstrap columns

What is the Bootstrap Grid?

In nutshell, it's a mechanism which allows us to create a responsive website. The Bootstrap grid allows us define rows, and each row consists of up to 12 columns.

12 bootstrap columns

You can either use one column which will be 12 blocks long or use multiple smaller blocks. The only rule is that you cannot exceed more than 12 blocks in a row. The blocks don't have to be equal in size: 

And you can skip some of the columns, as well as align them horizontally:

For more advanced usage you can check our docs:

3. Responsive breakpoints

Bootstrap is developed to be mobile first - it uses a handful of media queries to create sensible breakpoints for our layouts. These breakpoints are mostly based on minimum viewport widths and allow you to scale up elements as the viewport changes.

This is one of the most important features - in other words: you can define a different column size for different screen sizes. Bootstrap lists five different screen sizes, extra small (default), small (sm), medium (md), large (lg)  and extra large (xl).  Each size has a breaking point defined according to the table below:

Bootstrap responsive breakpoints table

Coming to the conclusion - this super handy tool allows us to create content which will automatically adjust to the screen size. Let's try the following code:


<div class="container">
    <div class="row">
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
      <div class="col-xl-1 col-lg-2 col-md-4 col-sm-6 col-xs-12">xl=1 lg=2 md=4 sm=6 xs=12</div>
    </div>
  </div>
      

Run the app and resize the browser size:

Bootstrap columns size

I hope that you now you can understand how easy it is to build responsive components using Bootstrap. Let's get back to our app. We want to create a two-column layout that will be visible on the desktop (extra large and large) as well as tablets in horizontal aspect (medium). For smaller screen size we want our columns to nest one below the other.

4. Responsive grid of our Calendar App

Replace the template of our app.component.html file with following code:


<div class="container">
  <div class="row">
    <div class="col-md-9">
      Left column
    </div>
    <div class="col-md-3">
      Right column
    </div>
  </div>
</div>

      

This will render the expected result. note that we have provided only a medium breaking point. Bootstrap by default assumes that we want 9/3 ratio not only for medium screen but also for bigger screens, as well as that we want everything which is lower than md to display on full 12 width.


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Sign up to follow your progress and get additional benefits