Bootstrap Grid System

Introduction

The grid system is the backbone of Bootstrap. It uses a series of containers, rows, and columns to layout and align content. Built with Flexbox, it is fully responsive and incredibly flexible.

1. How it Works

Bootstrap's grid system uses 12 columns. You can create layouts by specifying how many of these 12 columns your content should span.

• Containers provide a means to center and horizontally pad your site's contents.
• Rows are wrappers for columns. Each column has horizontal padding (gutter) for controlling the space between them.
• Columns are the building blocks. There are 12 template columns available per row.

<div class="container">
  <div class="row">
    <div class="col-4">One of three columns</div>
    <div class="col-4">One of three columns</div>
    <div class="col-4">One of three columns</div>
  </div>
</div>

2. Containers

Containers are required when using the grid system. There are two main types:

• .container: Fixed width, responsive centered container. (e.g., max-width changes at breakpoints).
• .container-fluid: Full width (100%) across all viewport and device sizes.

3. Grid Options & Breakpoints

The grid system adapts to screens using breakpoints. You can specify different behaviors for different sizes.

Example: Responsive Columns

The following example creates 3 columns on desktop, 2 on tablets, and 1 full-width column on mobile:

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">Column 1</div>
  <div class="col-12 col-md-6 col-lg-4">Column 2</div>
  <div class="col-12 col-md-6 col-lg-4">Column 3</div>
</div>

4. Advanced Features

Offsetting Columns

Move columns to the right using .offset-* classes.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>

Nesting

To nest your content with the default grid, add a new .row and set of .col-* columns within an existing .col-* column.

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">Level 2: .col-8 .col-sm-6</div>
      <div class="col-4 col-sm-6">Level 2: .col-4 .col-sm-6</div>
    </div>
  </div>
</div>