Bootstrap provides a responsive, mobile-first fluid grid system that automatically divides into up to 12 columns as the screen or viewport size increases.
We can also define the number of columns according to our needs:
1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12
The Bootstrap 5 grid system is responsive, and columns will automatically rearrange according to the screen size.
Make sure the sum of columns in each row equals or is less than 12.
* * *
## Grid Classes
The Bootstrap 5 grid system includes the following 6 classes:
* .col- for all devices.
* .col-sm- tablets - screen width equal to or greater than 576px.
* .col-md- desktop monitors - screen width equal to or greater than 768px.
* .col-lg- large desktop monitors - screen width equal to or greater than 992px.
* .col-xl- extra large desktop monitors - screen width equal to or greater than 1200px.
* .col-xxl- extra extra large desktop monitors - screen width equal to or greater than 1400px.
### Grid System Rules
Bootstrap5 grid system rules:
* Each row needs to be placed in a container with the class `.container` (fixed width) or `.container-fluid` (full width), which automatically sets some margin and padding.
* Use rows to create horizontal column groups.
* Content must be placed in columns, and only columns can be direct children of rows.
* Predefined classes like .row and .col-sm-4 can be used to quickly create grid layouts.
* Columns create gaps between column content through padding. This gap is set by negative margins on the .rows class to offset the first and last columns.
* **Grid columns are created by spanning the specified 12 columns**. For example, to set three equal columns, you need to use three .col-sm-4.
* Bootstrap 5 and Bootstrap 4 use flexbox instead of floats. A major advantage of Flexbox is that grid columns without a specified width are automatically set to **equal width and equal height columns**. If you want to learn more about Flexbox, you can read our (#).
The following table summarizes how the Bootstrap grid system works on different devices:
| | Extra Small <576px | Tablet ≥576px | Desktop ≥768px | Large Desktop ≥992px | Extra Large Desktop ≥1200px | Extra Extra Large Desktop ≥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 each side of a column) |
| Nestable | Yes |
| Column Ordering | Yes |
We combine the above classes to create more flexible page layouts.
**Tip:** Each class scales up proportionally, so if you want sm and md to have the same width, you only need to specify sm.
* * *
## Basic Structure of Bootstrap 5 Grid
The following code is the basic structure of Bootstrap 5 grid:
## Bootstrap5 Grid Basic Structure
First example: Create a row (**
**). Then, add the desired columns (set in the **.col-*** class). The first asterisk (*) represents the responsive device: sm, md, lg, or xl, and the second asterisk (*) represents a number. The numbers in the same row add up to 12.
Second example: Don't add numbers to each **col**, let bootstrap handle the layout automatically, each column in the same row has equal width: two **"col"**, each is 50% width. three **"col"**, each is 33.33% width, four **"col"**, each is 25% width, and so on. Similarly, you can use **.col-sm|md|lg|xl** to set responsive rules for columns.
Next, let's look at some examples.
### Create Equal Width Columns, Bootstrap Auto Layout
## Example
[Try it »](#)
### Equal Width Responsive Columns
The following example demonstrates how to create equal-width responsive columns on tablets and larger screens. **On mobile devices, i.e., when the screen width is less than 576px, the four columns will stack vertically**:
## Example
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
[Try it »](#)
### Unequal Width Responsive Columns
The following example demonstrates how to create unequal-width responsive columns on tablets and larger screens. **On mobile devices, i.e., when the screen width is less than 576px, the two columns will stack vertically**:
## Example
[Try it »](#)
### Set Column Width
If you set only one column's width, the other columns will automatically divide the remaining width. The following example sets column widths to 25%, 50%, 25%:
## Example
[Try it »](#)
* * *
## Tablets and Desktops
The following example demonstrates two columns on desktop devices, each taking 50%
YouTip