Bootstrap 5 offers a powerful grid layout system which helps to create mobile friendly layouts easily. There are six responsive breakpoints for different sizes of devices in Bootstrap grid layout system. There are 12 columns in each and by mixing and matching, you can create different layouts you desire. The grid system is based on flex box and is fully responsive.
Bootstrap 5 Grid Layout Tutorial
This tutorial contains the following topics:
- Grid layout basics
- Tier 5 grid system
- Equal width simple grid
- One column width and resize other columns
- Variable Width Content
- Equal Width Multiple Rows Grid
- Stacked Horizontal Grid
- Vertical Alignment
- Horizontal Alignment
- Grid with No Gutters
- Wrapped Column Grid
- Column Content Reordering within Grid
- Column Offsetting
- Nesting within Grid
1. Basics of Bootstrap Grid System
The grid system uses three main CSS classes to create the needed layout – .container, .row and .col. The container covers the complete layout and then the rows and then the columns.
- Use .container class for centering the content with fixed width and .container-fluid for responsive full width layout.
- You can use .row class to include all horizontal columns divided into 12 equal width.
- Place the actual content inside the columns using .col or .col-* classes. For example, a row can contain two columns like .col-8 + .col-4. The column should be the immediate child of the row class.
- All columns uses flexbox which means simple using .col class will divide the row into equal width columns. For example, when you use two .col classes within a row then it will into two 50% areas automatically.
- You can explicitly define column width like .col-sm-8 which will occupy 3/4 (75%) of the row’s width.
- By default columns and rows have padding and margin for better visibility. You can remove the margin and padding by adding an additional “.noglutter” class with “.row”.
- Bootstrap 5 offers six breakpoints – extra small (xs), small (sm), medium (md), large (lg), extra large (xl) and extra extra large (xxl).
- All tiers of breakpoints by default use the .col class. Any other classes used will be applied to all higher level devices. For example, .col-sm-4 (small) will be applied to small, medium, large and extra large devices.
2. Tier 6 Grid System
Below table shows the six tiers of breakpoints offered in Bootstrap 5:
| Grid | Extra Small | Small | Medium | Large | Extra Large | Extra Extra Large |
|---|---|---|---|---|---|---|
| Breakpoint | <576px | ≥576px | ≥768px | ≥992px | ≥1200px | ≥1400px |
| CSS Class | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
| Container Max Width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
- Columns – Each row is divided in to 12 equal width columns.
- Gutter Width – 15 pixels on each side of the column totaling to 30px.
- Nesting – Yes, columns can be nested within other column.
- Column Ordering – Yes, content inside any of the column within a row can be reordered.
Let us show different examples to understand the grids better:
3. Equal Width Simple Grid
Create simple grid with equal columns just using “.col” classes. When using “.col” classes the row will be automatically divided into equal width columns. For example when use two “.col” classes then the row will be divided into two 1/2+1/2 columns. Below is an example codes to create 1/2+1/2 and 1/3+1/3+1/3 columns using simple “.col” classes.
<div class="container">
<div class="row">
<div class="col">
.col
</div>
<div class="col">
.col
</div>
</div>
<div class="row">
<div class="col">
.col
</div>
<div class="col">
.col
</div>
<div class="col">
.col
</div>
</div>
</div>The equal columns will be shown on the browser like below:
4. One Column Width and Resize Other Columns
Bootstrap grid system allows you to define the width for one column and the remaining columns within the same row will automatically adjusted. For example, when you define “col + col-6 + col” in a row then it will be automatically divided like “1/3+1/6+1/3” columns. Below are two examples for defining one column and then the remaining two other columns will be adjusted accordingly.
Below is the code for adjusting columns surrounding the column with the defined width:
<div class="container">
<div class="row">
<div class="col">
.col
</div>
<div class="col-6">
.col-6
</div>
<div class="col">
.col
</div>
</div>
<div class="row">
<div class="col">
.col
</div>
<div class="col-5">
.col-5
</div>
<div class="col">
.col
</div>
</div>
</div>5. Variable Width Content
Width of the columns can be restricted to the actual content using “.col-{breakpoint}-auto” class, for example, “.col-md-auto”.
The middle columns in the above example is automatically adjusted to the width of the content. Below is the code for the above grid layout:
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
.col .col-lg-2
</div>
<div class="col-md-auto">
.col-md-auto (variable width)
</div>
<div class="col col-lg-2">
.col .col-lg-2
</div>
</div>
<div class="row">
<div class="col">
.col
</div>
<div class="col-md-auto">
.col-md-auto (variable width)
</div>
<div class="col col-lg-2">
.col .col-lg-2
</div>
</div>
</div>6. Equal Width Multiple Rows Grid
Simply create a multiple columns layout within a row using “.col” classes continuously. You just need to insert “.w-100” class where a breakpoint is required.
Below is the code to create equal width multiple row using a single “row” class.
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="w-100"></div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="w-100"></div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>7. Stacked Horizontal Grid
You can create stacked grid layout using “.col-sm-” classes which will be expanded to horizontal grid on desktop.
Below is the code for creating stacked horizontal grid layout as shown above.
<div class="row">
<div class="col-sm-8">.col-sm-8</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">.col-sm</div>
<div class="col-sm">.col-sm</div>
<div class="col-sm">.col-sm</div>
</div>8. Vertical Alignment
The vertical alignment of the content inside a column can be adjusted by adding one of the following three classes with “.row” class like below:
<div class="row align-items-start"> - Align content vertical top
<div class="row align-items-center"> - Align content vertical middle
<div class="row align-items-end"> - Align content vertical bottom9. Horizontal Alignment
Similar to vertical alignment, you can also adjust the horizontal alignment of the columns like below:
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
.col-4
</div>
<div class="col-4">
.col-4
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
.col-4
</div>
<div class="col-4">
.col-4
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
.col-4
</div>
<div class="col-4">
.col-4
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
.col-4
</div>
<div class="col-4">
.col-4
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
.col-4
</div>
<div class="col-4">
.col-4
</div>
</div>
</div>This will produce the following result on the browser:
10. Grid with No Gutters
By default the columns will have horizontal padding and the rows will have negative horizontal margins for better alignment. You can remove those margins and paddings by using “no-gutters” class with “row” as shown below.
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>It will produce the following result:
11. Wrapped Column Grid
When you have more than 12 columns in a row then the columns will be automatically wrapped to next row. For example, with the below first two columns will fit in first row (9+2=11) while the third and fourth columns will be wrapped in to new line.
<div class="row">
<div class="col-9">.col-9 (Row 1)</div>
<div class="col-2">.col-2 (Row 1)</div>
<div class="col-4">.col-4 (Row 1)</div>
<div class="col-5">.col-5 (Row 1)</div>
</div>The wrapped columns will look like below:
12. Column Content Reordering within Grid
Bootstrap allows you to reorder the content of a column regardless of the position in a row. For example, there are three columns used in the below grid layout.
<div class="container">
<div class="row">
<div class="col">
First .col No order
</div>
<div class="col order-12">
Second .col .order-12 moved to last
</div>
<div class="col order-1">
Third .col .order-1 moved to first
</div>
</div>
</div>The result looks like below with no ordered column will take the precedence of all other ordered columns and shown in first column. Content within the column using “order-12” class will be moved to the last position. And the content within the column using “order-1” will be moved to center (first) position.
13. Column Offsetting
From Bootstrap 4, they dropped the column offsetting feature due to the use of flexbox grid layout. But you can stll move the columns away using margin utility classes like “ml-auto”, “mr-auto”, etc.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>Below is the result of the column offsetting using margin classes:
14. Nesting within Grid
You can also nest the columns within other columns as shown below:
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>It will produce the following result:
Conclusion
As you can see, there are plenty of default layouts you can create with the Bootstrap 5 grid layout system. It is also possible to create custom CSS for creating customized layouts or modifying one of the default layouts. The solid flexbox grid layout and reusable components make Bootstrap 5 more stronger than the previous version.
Leave a Reply
Your email is safe with us.