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's grid system is responsive, and columns are automatically rearranged based on screen size.
bootstrap 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 such as . 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 is that bootstrap 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:
Ultra small device
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.
Basic Structure of a Bootstrap Grid
The below example is a basic structure of a Bootstrap grid:
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
The below example will show how to get a three equal-width columns starting at tablets and scaling to large desktops. where mobile phones the columns will be automatically stack:
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: