Bootstrap 5 Basic
Bootstrap 5 Flexbox
In Bootstrap 5, the grid system is a powerful layout tool based on a 12-column system, which helps create responsive layouts. Here’s a quick overview of how to use the grid system in Bootstrap 5:
| column 1 | column 1 | column 1 | column 1 | column 1 | column 1 | column 1 | column 1 | column 1 | column 1 | column 1 | column 1 |
| column 2 | column 2 | column 2 | column 2 | column 2 | column 2 | ||||||
| column 3 | column 3 | column 3 | column 3 | ||||||||
| column 4 | column 4 | column 4 | |||||||||
| column 5 | column 2 | column 5 | |||||||||
| column 6 | column 6 | ||||||||||
| column 4 | column 8 | ||||||||||
| column 12 | |||||||||||
.container or .container-fluid element contains rows, and each row contains .col elements..col class provides flexible column sizing that automatically distributes remaining space across columns.Try it yourself
.col-{breakpoint}-{number}..col-lg-4 will span 4 out of 12 columns on large screens and above.Try it yourself
Use .col-{breakpoint}-{number} to make columns responsive. For example, .col-md-6 makes the column take up half the row width on md screens and larger.
<576px)≥576px)≥768px)≥992px)≥1200px)≥1400px)Try it yourself
You can nest rows and columns within columns for more complex layouts.
Try it yourself