Bootstrap 5 Grid System Example

Q: What is the difference between container, container-fluid and container-xxl in Bootstrap 5?

container has a max-width at each breakpoint (responsive fixed width). container-fluid is always 100% width. container-sm through container-xxl are 100% wide until that breakpoint then become fixed. Use container for typical page layouts and container-fluid for full-width sections.

Q: How do I remove gutters between Bootstrap 5 grid columns?

Add g-0 to the row: . This removes all horizontal and vertical gutters. Use gx-0 to remove only horizontal gutters or gy-0 for only vertical. You can also use any gutter size: g-1 through g-5.

The Bootstrap 5 grid system uses a 12-column flexbox layout to create responsive page structures. This page covers 5 grid patterns — basic, responsive, auto layout, nesting and offset — with visual examples.

Quick Setup

The grid system needs only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

Class	What It Does
`.container`	Fixed-width responsive container
`.container-fluid`	Full-width container
`.row`	Horizontal group of columns
`.col`	Equal-width auto column
`.col-6`	Half-width column (6 of 12)
`.col-md-4`	4-column width at md+ breakpoint
`.g-3`	Gap between columns and rows
`.gx-3`	Horizontal gap only
`.offset-md-3`	Push column 3 columns right
`.order-md-2`	Change column order

1. Bootstrap 5 Basic Grid

The Bootstrap 5 grid is based on 12 columns. Columns must be inside a row inside a container.

2. Bootstrap 5 Responsive Grid

Columns change width at different breakpoints — full width on mobile, 2 cols on tablet, 3 on desktop.

3. Bootstrap 5 Auto Layout Columns

Use col without a number to automatically share equal width. Use col-auto to fit content size.

4. Bootstrap 5 Nested Grid

Grids can be nested by adding a new row inside a column. Each nested row has its own 12 columns.

5. Bootstrap 5 Offset Columns

Push columns to the right using offset-* classes. Useful for centered or asymmetric layouts.

Frequently Asked Questions

How many columns does the Bootstrap 5 grid have?▲

Bootstrap 5 uses a 12-column grid system. You can divide the 12 columns in any combination: 6+6, 4+4+4, 3+3+3+3, 8+4, 9+3 etc. Column numbers must add up to 12 or less per row. Use col without a number for equal-width auto layout.

What are Bootstrap 5 grid breakpoints?▼

Bootstrap 5 has 6 breakpoints: xs (< 576px, no prefix), sm (≥ 576px), md (≥ 768px), lg (≥ 992px), xl (≥ 1200px), xxl (≥ 1400px). Use them as col-sm-6 col-md-4 col-lg-3 to change column width at each breakpoint.

What is the difference between container, container-fluid and container-xxl in Bootstrap 5?▼

container has a max-width at each breakpoint (responsive fixed width). container-fluid is always 100% width. container-sm through container-xxl are 100% wide until that breakpoint then become fixed. Use container for typical page layouts and container-fluid for full-width sections.

How do I remove gutters between Bootstrap 5 grid columns?▼

Add g-0 to the row: <div class='row g-0'>. This removes all horizontal and vertical gutters. Use gx-0 to remove only horizontal gutters or gy-0 for only vertical. You can also use any gutter size: g-1 through g-5.

How do I vertically align columns in Bootstrap 5 grid?▼

Add align-items-center to the row for vertical center alignment: <div class='row align-items-center'>. Options: align-items-start, align-items-center, align-items-end. For individual column alignment add align-self-center directly to the col div.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →