Understanding Grid System in Bootstrap — A Detailed Explanation

5 min readJul 29, 2023

Introduction

Bootstrap, a free, open-source framework, is the go-to tool for countless developers when creating mobile-first, responsive web designs. It’s admired for its simplicity, adaptability, and the seamless implementation of a grid system. But what exactly is the Bootstrap Grid System, and how does it work? Let’s dive in.

What is the Grid System?

The grid system is a structure that allows developers to place their web elements in a systematic and responsive manner. The grid system in Bootstrap uses containers, rows, and columns to layout and align content. It is based on a 12-column layout, which can be combined or subdivided to create a layout fitting your design needs.

Breaking Down the Grid System

Containers

Containers are the most basic layout element in Bootstrap and are required when using the default grid system. Containers center and horizontally pad your content. There are two types of containers in Bootstrap:

.container, which sets a max-width at each responsive breakpoint
.container-fluid, which is always 100% width, regardless of viewport size

<div class="container">
  <!-- Content here -->
</div>

Rows

Rows are wrappers for columns. They ensure the columns inside them are positioned correctly. Each row equates to a horizontal block, fitting 12 columns inside.

<div class="row">
  <!-- Columns -->
</div>

Columns

Columns are the immediate children of rows. In Bootstrap, the page is divided into a grid of columns. The number of columns you’ll need depends on the desired layout and overall design goal.

<div class="col">
  <!-- Content -->
</div>

Understanding Column Classes

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. The grid classes are applied to an element, turning it into a grid container. These grid containers can then be nested as needed to create complex layouts.

The grid classes are named using a standard format: .col-{breakpoint}-{value}, where:

{breakpoint} is one of Bootstrap's five responsive breakpoints (sm, md, lg, xl, or xxl).
{value} is a number from 1 to 12, indicating how many columns wide the element should be.

<!-- On small (sm) screens and up, the element will occupy 6 columns. -->
<div class="col-sm-6">
  <!-- Content -->
</div>

Why 12 Columns?

Bootstrap’s 12-column grid system might seem arbitrary, but it’s actually a practical choice. The number 12 is divisible by 1, 2, 3, 4, and 6, giving you plenty of flexibility when deciding how many columns to span. This division ability allows for a variety of layouts for different screen sizes.

The Magic of Responsiveness

The Bootstrap grid system adapts to the screen size by changing the width of the columns. When the screen size changes, the grid system automatically adjusts the layout. This is achieved using CSS media queries. The breakpoints provided by Bootstrap are:

Extra small (xs, <576px)
Small (sm, ≥576px)
Medium (md, ≥768px)
Large (lg, ≥992px)
Extra large (xl, ≥1200px)
Extra extra large (xxl, ≥1400px)

<!-- This div will occupy 12 columns on xs screens, 6 on md screens, and 3 on lg and above screens. -->
<div class="col-12 col-md-6 col-lg-3">
  <!-- Content -->
</div>

Nested Grids

Bootstrap allows you to nest rows and columns, giving you more granular control over your layouts. A nested grid is a grid inside a column of another grid. It’s important to note that nested rows still need to respect the 12-column rule.

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-6">
        <!-- Nested Content -->
      </div>
      <div class="col-6">
        <!-- Nested Content -->
      </div>
    </div>
  </div>
  <div class="col-6">
    <!-- Content -->
  </div>
</div>

Offsetting and Ordering Columns

Another handy feature of the Bootstrap grid system is the ability to offset and order columns.

Offsetting Columns

Offsetting allows you to add “empty” columns before your content, effectively pushing it to the right. Offsets are especially useful when you want to customize the spacing of your grid layout. You can use the .offset-{breakpoint}-{value} classes in conjunction with the column classes.

<!-- This div will be offset by 2 columns on small (sm) screens and up. -->
<div class="col-sm-8 offset-sm-2">
  <!-- Content -->
</div>

In this example, the div occupies 8 out of the 12 columns, and the remaining 2 on each side are left as empty space, centering the div.

Ordering Columns

Bootstrap also allows you to change the visual order of your columns without changing the HTML structure, which is particularly useful for responsive designs. To do this, you can use the .order-{breakpoint}-{value} classes.

<div class="row">
  <div class="col-6 order-2 order-md-1">
    <!-- This content will appear first on medium (md) screens and up, and second on smaller screens. -->
  </div>
  <div class="col-6 order-1 order-md-2">
    <!-- This content will appear second on medium (md) screens and up, and first on smaller screens. -->
  </div>
</div>

In this example, the order of the divs flips at the ‘md’ breakpoint.

Gutter Classes for Control Over Spacing

One of the key aspects of designing a pleasing and readable layout is the management of spaces or gaps between your grid columns, commonly known as gutters. Bootstrap 5 introduces gutter classes that give developers even more control over the spacing in their grid layouts.

Previously, paddings were used to create these gutters, but now margin utilities have been leveraged for more flexibility and control. The new gutter classes replace the former spacing method and apply to both rows and columns for horizontal and vertical spacing.

To use these classes, you’ll add the .g-* classes where * can be any integer from 0 to 5, corresponding to the spacing scale in Bootstrap.

For instance, let’s create a row with a horizontal spacing of 1.5rem:

<div class="row g-5">
  <div class="col">
    <!-- Content -->
  </div>
  <div class="col">
    <!-- Content -->
  </div>
</div>

Here, the g-5 class creates gutters of 1.5rem on both the left and right sides of each column.

You can also control the horizontal and vertical gutters separately by using the gx-* and gy-* classes, respectively:

<div class="row gx-5 gy-3">
  <div class="col">
    <!-- Content -->
  </div>
  <div class="col">
    <!-- Content -->
  </div>
</div>

In this example, the horizontal gutters are 1.5rem (because of gx-5), and the vertical gutters are 1rem (because of gy-3).

Conclusion

We’ve explored the integral components of Bootstrap’s grid system, delving into its containers, rows, columns, and the logic behind the 12-column structure. We’ve also navigated the system’s inherent responsiveness, its capability for nested grids, and the power to offset and order columns. The introduction of gutter classes in Bootstrap 5, providing fine control over spacing, adds to the system’s flexibility. This system is a strong tool for creating responsive, aesthetically pleasing web layouts. Remember, mastery comes with practice, so dive in, experiment with the various elements, and start creating versatile layouts with Bootstrap’s grid system. Happy coding!