Bootstrap5 Grid System

Bootstrap provides a responsive, mobile-first fluid grid system. As the screen or viewport size increases, the system automatically divides into up to 12 columns.

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

Bootstrap 5's grid system is responsive, and columns will automatically rearrange based on screen size.

Please ensure that the total number of columns in each row is equal to or less than 12.

---

Grid Classes

Bootstrap 5 grid system has 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- Ultra large desktop monitors - screen width equal to or greater than 1400px.

Grid System Rules

Bootstrap5 Grid System Rules:

• Each grid row needs to be placed in a container with the.container(fixed width) or.container-fluid(full-width) class, so that some margins and paddings are automatically set.
• Use rows to create horizontal groups of columns.
• Content should be placed in columns, and only columns may be direct children of rows.
• Predefined classes such as.rowand.col-sm-4can be used to quickly create grid layouts.
• Columns create gaps between column content through padding. This gap is achieved by.rowsnegative margins on the class setting the offset for 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-4to set.
• Bootstrap 5 and Bootstrap 4 use flexbox instead of floats. A major advantage of Flexbox is that grid columns without a specified width will automatically be set toequal-width and equal-height columns.. If you want to learn more about Flexbox, you can read ourCSS Flexbox tutorial. 。

The following table summarizes how the Bootstrap grid system works on different devices:

	Extra small devices <576px	Tablet ≥576px	Desktop monitor ≥768px	Large desktop monitor ≥992px	Extra large desktop monitor ≥1200px	Ultra large desktop monitor ≥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 and	12
Gutter width	1.5rem (.75rem on each side of a column)
Nestable	Yes
Column ordering	Yes

We combine the above classes together 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:

First example: create a row (<div class="row">). Then, add the columns you need (.col-*-*set in the class). The first asterisk (*) indicates the responsive device: sm, md, lg, or xl, the second asterisk (*) indicates a number, and the numbers in the same row add up to 12.

Second example: instead of adding a number to eachcolcolumn, let Bootstrap automatically handle the layout, each column in the same row has equal width: two"col"columns, each will be 50% width. Three"col"columns, each will be 33.33% width, four"col"columns, each will be 25% width, and so on. Similarly, you can use.col-sm|md|lg|xlto set the responsive rules for columns.

Next, we can look at examples.

Create equal-width columns, Bootstrap auto layout

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 be stacked vertically.:

Unequal-width responsive columns

The following example demonstrates how to create responsive columns of unequal width on tablets and larger screens.On mobile devices, i.e., when the screen width is less than 576px, the two columns will be stacked vertically.:

Set one column width

If you only set the width of one column, the other columns will automatically share the remaining width equally. The following example sets column widths to 25%, 50%, 25%:

---

Tablet and Desktop

The following example demonstrates that on desktop displays, two columns each take up 50% of the width; on tablets, the left column is 25% and the right column is 75%; on small devices such as mobile phones, they will stack vertically.

---

Tablet, Desktop, Large Desktop Display, Ultra Large Desktop Display

The following example has width ratios of 25%/75%, 50%/50%, 33.33%/66.67%, 16.67/83.33% on tablets, desktops, large desktop displays, and extra large desktop displays, respectively; on small devices such as mobile phones, they will stack vertically.

---

Nested Columns

The following example creates a two-column layout, with one column containing two nested columns:

Display effect:

---

Offset Columns

Offset columns are set via theoffset-*-*class. The first asterisk (*) can besm、md、lg、xl, indicating the screen device type, the second asterisk (*) can be1to11a number.

To use offsets on large screen displays, use the.offset-md-*classes. These classes increase the left margin (margin) of a column by*columns, where*the range is from1to11。

For example: .offset-md-4 moves .col-md-4 four grid columns to the right.

Other Extensions