Bootstrap Grid Basics

Manvi Chaddha
Last Updated: May 13, 2022

Introduction

Bootstrap is an open-source, front-end framework used to create modern websites. Its popularity allows developers to quickly develop projects by importing ready-made code snippets and plugins that can be implemented by just writing a few lines of code. The bootstrap grid system is an important topic to have a solid foundation, as it helps you quickly develop mobile-friendly responsive websites.  
This blog shed light on the Grid System.

Understanding the Grid System

Bootstrap's grid system uses a series of containers, rows, and columns to layout and aligns content. It's built with a flexbox and is fully responsive. The bootstrap grid system allows you to group up to 12 columns across a page. You can also group the columns to create wider columns if you do not want to individually use all the 12 columns.

(Source: Tulane)

The Bootstrap Grid System allows up to 12 columns across the page. You can use all 12 columns individually or group the columns to create wider columns. Bootstrap Grid System is responsive, and the columns are rearranged automatically according to the screen size.

Using the following CDN, you can easily use Bootstrap inside an HTML file.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


Let's have a look at a simple example of the Bootstrap Grid system

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <div class="row">
              <div class="col-sm">
                One of three columns
              </div>
              <div class="col-sm">
                One of three columns
              </div>
              <div class="col-sm">
                One of three columns
              </div>
            </div>
          </div>
    </body>
</html>


The output is

The three columns will stack one over the other on smaller screens, as shown below.

Now if you are just starting off with bootstrap, you will find the following divs and their classes quite unfamiliar. 

 <div class="container">
 <div class="row">
 <div class="col-sm">


Breaking it down, here’s how it works

  • Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
  • Rows create horizontal groups of columns. Therefore, if you want to split your layout horizontally, use .row.
  • We use .col-sm-* to create a column, where * specifies the number of columns between 1 and 12. sm specifies the breakpoint where the columns change their width. sm means "screen ≥768px", so in the example above, the columns will stretch to 100% of the width on the screens smaller or equal 768px.


Note that generally, the bootstrap grid system supports the following classes.

ClassScreen Size
xsScreenless than 768px wide
smScreen equal to or greater than 768px wide
MDScreen equal to or greater than 992px wide.
LGScreen equal to or greater than 1200px wide.

 

Examples of Bootstrap Grid System

Three unequal columns

In the first example we saw how to make three equal columns, now lets see how to make three unequal columns.

<div class=”row”>
        <div class="col" style="border: 1px solid red;">
            1 of 3
        </div>
        <div class="col-6" style="border: 1px solid green;">
            2 of 3
        </div>
        <div class="col" style="border: 1px solid blue;">
            3 of 3
        </div>
</div>


The output is:

On smaller screens

Let's take a look at another example, 

<div class="container">
      <div class="row">
        <div class="col-8" style="border: 1px solid red;">col-8</div>
        <div class="col-4" style="border: 1px solid green;">col-4</div>
      </div>
    </div>

 

 

Notice how the columns maintain their responsiveness.

Variable width content

You can use col-{breakpoint}-aut class to resize columns based on the natural width of the content

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">1st column</div>
        <div class="col-md-auto">Variable width content column</div>
        <div class="col col-lg-2">3rd column</div>
     </div>
 </div>


The output is

Alignment

The flexbox alignment utilities can be used to vertically and horizontally align columns. This is illustrated in the example below

 <div class="container">
      <div class="row align-items-start">
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
      </div>
      <div class="row align-items-center">
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
      </div>
      <div class="row align-items-end">
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
      </div>
   </div>


The output is

On smaller screen

So far, so good, you now have a good understanding of Bootstrap Grid; in addition, the following table summarises the working of the bootstrap grid system across multiple devices.

Extra small

<768px

Small

>=768px

Medium

>=992px

Large

>=1200px

 
Class prefix.col-xs-.col-sm-

.col-

MD-

.col-LG-
Suitable forPhonesTabletsSmall LaptopsLaptops & Desktops
Grid behaviourHorizontal at all timesCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpoints
Container widthNone (auto)750px970px1170px
# of columns12121212
Column widthAuto~62px~81px~97px
Gutter width30px (15px on each side of a column)30px (15px on each side of a column)30px (15px on each side of a column)30px (15px on each side of a column)
NestableYesYesYesYes
OffsetsYesYesYesYes
Column orderingYesYesYesYes

Let's now check out some of the frequently asked questions related to Bootstrap Grid.

Frequently Asked Questions

  1. What is the 12 grid column system in Bootstrap? 
    The Bootstrap Grid System allows up to 12 columns across the page. You can use all 12 columns individually or group the columns to create wider columns. Bootstrap Grid System is responsive, and the columns are rearranged automatically according to the screen size.
     
  2. What are the classes that drive the bootstrap grid system? 
    The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), MD (desktops), and LG (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Key Takeaways

This blog was about the Bootstrap grid system, how the grid system works, and we also checked out certain examples related to the grid system.

Isn't web development engaging? Building new websites, web applications all by yourself sounds quite interesting, so what are you waiting for? Enroll in the full-stack web development course at Coding Ninjas and get the job you always dreamed of.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think