Bootstrap4 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 4's grid system is responsive, and columns will automatically rearrange based on screen size.

---

Grid Classes

Bootstrap 4 grid system has the following 5 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)

Grid System Rules

Bootstrap4 Grid System Rules:

• Each row of the grid needs to be placed in a container that has the.container(fixed width) or.container-fluid(full-screen width) class, so that some margins and paddings can be automatically set.
• Use rows to create horizontal column groups.
• Content needs to be placed in columns, and only columns can 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 through the.rowsnegative margin on the class to set the offset of 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.
• The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox (flexible box) 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
Container max width	None (auto)	540px	720px	960px	1140px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
Number of columns and	12
Gap width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

The following classes can be used together to create more flexible page layouts.

---

Basic Structure of Bootstrap 4 Grid

The following code is the basic structure of Bootstrap 4 grid:

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

Second example: instead of addingcolnumbers to each, let Bootstrap automatically handle the layout, each column in the same row has equal width: two"col", each would be 50% width. Three"col"each would be 33.33% width, four"col"each would be 25% width, and so on. Similarly, you can use.col-sm|md|lg|xlto set 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 stack vertically.:

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.:

---

Tablet and desktop

The following example demonstrates that on desktop monitors, the two columns each take 50% 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 monitor, extra large desktop monitor

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

---

Offset columns

Offset columns are set viaoffset-*-*classes. The first asterisk (*) can besm、md、lg、xl, indicating the screen device type, and the second asterisk (*) can be1to11numbers.

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

For example: .offset-md-4 moves .col-md-4 to the right by four column grids.

Other Extensions