Styles menu
Column grid
Mobile-first grid system is used to build layouts using a twelve column system.
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.
How it works
Breaking it down, here’s how the grid system comes together:
Our grid supports six responsive breakpoints. Breakpoints are based on min-width media queries, meaning they affect that breakpoint and all those above it. This means you can control container and column sizing and behavior by each breakpoint.
Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.
| Grid breakpoint dimensions | xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|---|---|---|---|---|---|---|
Container max-width |
None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Number of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Column number | Column width % |
|---|---|
| 12 | 100%; |
| 11 | 91.66666667%; |
| 10 | 83.33333333%; |
| 9 | 75% |
| 8 | 66.66666667% |
| 7 | 58.33333333% |
| 6 | 50% |
| 5 | 41.66666667% |
| 4 | 33.33333333% |
| 3 | 25% |
| 2 | 16.66666667% |
| 1 | 8.33333333% |
When building grid layouts, all content goes in columns. The hierarchy of Bootstrap’s grid goes from container to row to column to your content.
Containers center and horizontally pad your content. Use .container for a responsive pixel width, .container-fluid for width: 100% across all viewports and devices.
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side.
Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four) widths are set in percentages so you always have the same relative sizing.