BS5 Grid System
Bootstrap 4 Grid System
The grid system of Bootstrap supports a maximum of 12 columns on a page.
To make broader columns, you can group the columns together if you don’t want to use each of the 12 columns individually:
Because of Bootstrap’s responsive grid technology, the columns will adjust to fit the size of the screen: Three columns of content might seem better on a large screen, but stacking the content pieces on top of one another would work better on a small one.
Grid Classes
- .col- (extra small devices – screen width less than 576px)
- .col-sm- (small devices – screen width equal to or greater than 576px)
- .col-md- (medium devices – screen width equal to or greater than 768px)
- .col-lg- (large devices – screen width equal to or greater than 992px)
- .col-xl- (xlarge devices – screen width equal to or greater than 1200px)
Basic Structure of a Bootstrap 5 Grid
The fundamental layout of a Bootstrap 5 grid is as follows:
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Make a row (<div class=”row”>) as an example first. The desired number of columns (tags with relevant data) should then be added .col-*-* 8classes. The responsiveness—sm, md, lg, or xl—is represented by the first star (*), and a number—which should always add up to 12 for each row—is represented by the second star.
Second example: to create equal width columns, let bootstrap handle the layout rather than appending a number to each col. Each of the two “col” components has a 50% width. Three columns equals 33.33% of a col’s width. 4 cols = 25% of the width, etc. For responsive columns, you may also use .col-sm|md|lg|xl.
Grid Options
The functionality of the Bootstrap 4 grid system over a range of screen sizes is outlined in the following table:
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
|---|---|---|---|---|---|
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes |
