Lesson 2 – Bootstrap Grid System

Almost all the modern websites use grids to properly structure and organize content. It is also quite cumbersome, especially for a new developer, to create grids using pure CSS. However, Bootstrap has made it particularly easy to include grids on the web. It is a responsive, mobile-first, and fluid grid system. As a result, it can scale up to 12 grids as the screen size increases. Bootstrap offers predefined classes for you to easily layout girds. In addition, you also have the freedom to generate more semantic layouts with the help of powerful mixins.

The bootstrap grid allows you to target four different screen sizes. These sizes include extra small (576px) such as smartphones, small (768px) such as tablets, large (992px) such as laptops and extra-large (1200px) such as giant LCDs.

You need to take care of a few things while creating a grid. To begin with, the Bootstrap grid is made up of series of columns and rows which contain your data. Each row can contain up to 12 columns. Similarly, you will put rows in a “container div.” Furthermore, rows can only have columns as their immediate children.

Let us create some grids targeting different screen sizes. We start off with the small screen size.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Environment Setup</title>
</head>
<body>
        <div class="container">
                <div class="row text-center text-white">
                  <div class="col-sm-6 bg-secondary">
                    One of three columns
                  </div>
                  <div class="col-sm-6 bg-success">
                    One of three columns
                  </div>
                  
                </div>
              </div>

    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

In the above example, we have created two equal-width columns for small screens. Please note that the total width of the two columns is equal to the width of twelve columns. Also, remember that there will be no change in the layout as the screen size increases.

Here is how the grid will look like.

In the next example, we are going to create a grid containing 3 columns for medium screens.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Environment Setup</title>
</head>
<body>
        <div class="container">
                <div class="row text-center text-white">
                  <div class="col-md-4 bg-primary">
                    One of three columns
                  </div>
                  <div class="col-md-4 bg-success">
                    One of three columns
                  </div>
                  <div class="col-md-4 bg-danger">
                    One of three columns
                  </div>
                </div>
              </div>

    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

Here is the output of the above code.

Now, we try to build a four column grid targeting large screens.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Environment Setup</title>
</head>
<body>
    <div class="container">
        <div class="row text-center text-white">
            <div class="col-lg-3 bg-primary">
            One of three columns
            </div>
            <div class="col-lg-3 bg-success">
            One of three columns
            </div>
            <div class="col-lg-3 bg-danger">
            One of three columns
            </div>
            <div class="col-lg-3 bg-warning">
            One of three columns
            </div>
        </div>
    </div>

    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

Once the browser executes this code, we will have a beautiful four-column grid.

In the next lesson, we will study Bootstrap Typography