Bootstrap 4 - Grid System
Bootstrap provides a responsive, mobile device-first streaming grid system. As the size of the screen or viewport increases, the system will automatically divide into a maximum of 12 columns.
We can also define the number of columns according to our needs:
Bootstrap 4's grid system is responsive, and columns are automatically rearranged based on screen size.
Bootstrap 4 grid system has the following 5 classes:
- .col- for all devices
- .col-sm- tablet-screen width equal to or greater than 576px
- .col-md- desktop monitor-screen width is 768px or more)
- .col-lg- large desktop monitor-screen width equal to or greater than 992px)
- .col-xl- Large desktop monitor-screen width equal to or greater than 1200px)
Grid system rules
Bootstrap4 grid system rules:
- Each line of the grid needs to be placed in a container with the
.container(fixed width) or
.container-fluid(full screen width) class, so that it can automatically Set some padding and padding.
- Use rows to create horizontal column groups.
- Content needs to be placed in columns, and only columns can be direct children of a row.
- Predefined classes like . row and . col-sm-4 can be used to quickly make grid layouts.
- Columns create gaps between column contents by padding. This gap sets the offset of the first and last rows by a negative margin on the . Rows class.
- 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 to set it.
- The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox instead of floating. A great advantage of Flexbox is that grid columns without a specified width will automatically be set to equal width and contour columns . If you want to learn more about Flexbox, you can read our CSS Flexbox tutorial.
The following table summarizes how the Bootstrap grid system works on different devices:
Large desktop display
Large desktop monitor
|Maximum container width||None (auto)||540px||720px||960px||1140px|
|Number of columns and||12|
|Gap width||30px (15px on each side of a column)|
The following classes can be used together to create more flexible page layouts.
Bootstrap 4 grid basic structure
The following code is the basic structure of the Bootstrap 4 grid:
Bootstrap4 grid basic structure
First example: create a line(<div class="row">). Then, add the required columns ( .col-*-* classes). First asterisk (*) Responding device: sm, md, lg or xl, the second asterisk (*) represents a number, and the numbers on the same line add up to 12.
Second example: Do not add numbers to each col , let bootstrap automatically handle the layout, and each column of the same row is equal in width: two "col" , Each with a width of 50%. Three "col" are each 33.33% wide, four "col" are each 25% wide, and so on. Similarly, you can use .col-sm | md | lg | xl to set the response rule for the column.
Next we can look at examples.
Create equal width columns, Bootstrap auto layout
Same-width responsive columns
The following examples demonstrate how to create responsive columns of equal width on tablets and larger screens. On mobile devices, when the screen width is less than 576px, the four columns will be stacked on top of each other :
Unequal width responsive columns
The following example demonstrates creating responsive columns of varying widths on tablets and larger screens. On mobile devices, when the screen width is less than 576px, the two columns will be stacked on top of each other :
Tablet and desktop
The following example demonstrates that the width of the two columns on the desktop display is 50% each. If it is on the tablet side, the width on the left is 25% and the width on the right is 75%. On small devices such as mobile phones, Stacked display.
Flat, desktop, large desktop monitor, large desktop monitor
The width ratios of the following examples on the flat panel, desktop, large desktop display, and large desktop display are: 25% /75%, 50% /50%, 33.33% /66.67%, 16.67 /83.33%, and And other small devices will be stacked.
The offset column is set by the offset-*-* classes. The first asterisk (*) can be sm, md, lg, xl , which indicates the screen device type, and the second asterisk (*) can be 1 to 11 .
To use offsets on large screen displays, use the .offset-md-* classes. These classes increase the left margin of a column by * columns, where the * range is from 1 to 11 .
For example: .offset-md-4 moves .col-md-4 four columns to the right.