Bootstrap Grid System

Bootstrap 5 Grid System

Understanding the Bootstrap Grid

Bootstrap’s powerful grid system uses a series of containers, rows, and columns to lay out and align content. It’s built with flexbox and is fully responsive, allowing up to 12 columns across the page.

You don’t have to use all 12 columns individually. You can group them to create wider columns. For example, three equal columns would each use 4 units (.col-4 or .col-md-4).

A visual representation of column combinations:

12 x .col-1 (or .col-sm-1, etc.)
[ ][ ][ ][ ][ ][ ][ ][ ][ ][ ][ ][ ]

3 x .col-4
[    ][    ][    ]

1 x .col-4 and 1 x .col-8
[    ][        ]

2 x .col-6
[      ][      ]

1 x .col-12
[            ]

The grid system is responsive, meaning columns automatically rearrange based on screen size. For instance, a three-column layout on a desktop might stack into a single-column layout on a mobile phone for optimal viewing.

Key Principle: Grid columns in a row should ideally span up to 12 units for that row. If you add more than 12 column units within a single row, the extra columns will wrap onto a new line.

Grid Tiers (Breakpoints)

Bootstrap 5 includes six responsive tiers (breakpoints) for building flexible layouts:

Implicit Extra small (xs) - <576px (uses .col-*)
Small (sm) - ≥576px (uses .col-sm-*)
Medium (md) - ≥768px (uses .col-md-*)
Large (lg) - ≥992px (uses .col-lg-*)
Extra large (xl) - ≥1200px (uses .col-xl-*)
Extra extra large (xxl) - ≥1400px (uses .col-xxl-*)

These classes can be combined to create highly dynamic and adaptive layouts. Bootstrap is mobile-first, so classes for smaller breakpoints (e.g., .col-sm-6) also apply to larger breakpoints unless overridden by a larger breakpoint class (e.g., .col-lg-4). If you want the same width for all breakpoints starting from extra small, you only need to specify the base .col-* class (e.g. .col-6).

Fundamental Grid Rules

Follow these rules for proper grid implementation:

Rows (.row) must be placed within a .container (fixed-width, responsive) or .container-fluid (full-width) or a responsive container (e.g. .container-md) for proper alignment and padding.
Use rows to create horizontal groups of columns. Rows act as wrappers for columns.
Content should be placed within columns (.col-*), and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-sm-4 are available for quickly making grid layouts.
Gutters (the space between columns) are created using padding on columns and are controlled by .g-*, .gx-* (horizontal), or .gy-* (vertical) utility classes on the .row element. For example, .row.g-3 will set a gutter of 1rem (default value for 3 in spacing utilities).
Columns are created by specifying the number of the 12 available units you wish to span. For example, three equal columns would use three .col-4 (or .col-md-4, etc.).
Columns without a specified number (e.g., .col or .col-md) will automatically layout as equal-width columns.

Basic Structure of a Bootstrap Grid

Here’s a conceptual structure:

<div class="container">
  <div class="row gx-3">
    <!-- gx-3 adds horizontal gutters -->
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
  <div class="row mt-3 gy-3">
    <!-- mt-3 for margin top, gy-3 for vertical gutters -->
    <div class="col-lg-4">Column A</div>
    <div class="col-lg-4">Column B</div>
    <div class="col-lg-4">Column C</div>
  </div>
</div>

To build your layout: first, create a container (.container or .container-fluid). Inside the container, add rows (.row). Then, add your columns (.col-*) within the rows. Remember that column numbers (e.g., in .col-md-6) refer to the 12-unit system for that row.

Grid Options Summary (Bootstrap 5)

This table summarizes how the Bootstrap grid system works across multiple devices:

Feature
Extra Small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra Large (xl)
Extra Extra Large (xxl)


Breakpoint
<576px
≥576px
≥768px
≥992px
≥1200px
≥1400px


Class prefix
.col-
.col-sm-
.col-md-
.col-lg-
.col-xl-
.col-xxl-


Container max-width
None (auto)
540px
720px
960px
1140px
1320px


Number of columns
12
12
12
12
12
12


Gutter width
Customizable via .g-*, .gx-*, .gy-* (default 1.5rem / 24px between columns)


Nestable
Yes
Yes
Yes
Yes
Yes
Yes


Offsets
Yes (.offset-*, .offset-sm-*, etc.)
Yes
Yes
Yes
Yes
Yes


Column ordering
Yes (.order-*, .order-sm-*, etc.)
Yes
Yes
Yes
Yes
Yes

Application Scenario: A complex e-commerce product page. The grid can be used to create a main product image area, a sidebar for product details and purchase options, and a section below for related products. Each section might have different column configurations for different screen sizes to ensure optimal user experience.

Common Pitfall: Forgetting to place columns inside a .row or a .row inside a .container. This can lead to unexpected alignment and spacing issues. Always follow the container > row > col hierarchy.

For more details, explore the official Bootstrap Grid documentation, including information on auto-layout columns, flex alignment utilities, and more advanced gutter control.

Examples

The following chapters provide practical examples of grid layouts for different scenarios and device sizes.

Stacked-to-horizontal layouts
Layouts for small devices
Layouts for medium devices
Layouts for large devices
Mixed device layouts