Bootstrap provides a responsive, mobile-first fluid grid system that scales 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 4 grid system is responsive, and columns will automatically rearrange based on the screen size.
* * *
## Grid Classes
The 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 needs to be placed in a container with the `.container` (fixed width) or `.container-fluid` (full width) class, which automatically sets some margins and paddings.
* Use rows to create horizontal groups of columns.
* 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 for quick grid layouts.
* Columns create gutters (gaps) between column content. This gutter is created via negative margins on the .rows class to offset the first and last columns.
* **Grid columns are created by spanning across 12 columns**. For example, to set three equal columns, you need to use three .col-sm-4 classes.
* The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox instead of floats. A major advantage of flexbox is that grid columns without a specified width will automatically be 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 | Tablets ≥576px | Desktop ≥768px | Large Desktop ≥992px | Extra Large Desktop ≥1200px |
| --- | --- | --- | --- | --- | --- |
| Container max width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | `.col-` | `.col-sm-` | `.col-md-` | `.col-lg-` | `.col-xl-` |
| # of columns | 12 |
| Gutter width | 30px (15px on each side of a column) |
| Nestable | Yes |
| Column ordering | Yes |
The following classes can be combined to create more flexible page layouts.
* * *
## Bootstrap 4 Grid Basic Structure
The following code is the basic structure of Bootstrap 4 grid:
## Bootstrap4 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, the second asterisk (*) represents a number, and the numbers in the same row add up to 12.
Second example: Don't add numbers on 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
YouTip