Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to create layouts with Bootstrap 5.
Breakpoints
Breakpoints are the most basic parts of responsive design.
We can use it to control the layout of our pages when it’s adapted at a particular viewport or device size.
Bootstrap breakpoints are built with CSS media queries.
The design is mobile-first and it’s responsive by default.
Available Breakpoints
Bootstrap 5 has 6 breakpoints.
They include x-small which is between 0 and 576px.
Small, which has the sm class infix is 576px or larger.
Medium, which has the md class infix is 768px or larger.
Large, which has the lg class infix is 992px or larger.
Extra-large, which is infixed by xl , is 1200px or larger.
Extra extra large, which is infixed by xxl , is 1400px or larger.
Min-Width
Bootstrap has mixins for using media queries with the min-width.
They include:
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }
They are equivalent to:
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }
@media (min-width: 1400px) { ... }
Max-Width
There’re also breakpoints for max-width.
For example, we can write:
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }
Which is equivalent to:
@media (max-width: 575.98px) { ... }
@media (max-width: 767.98px) { ... }
@media (max-width: 991.98px) { ... }
@media (max-width: 1199.98px) { ... }
@media (max-width: 1399.98px) { ... }
xxl has no query since there’s no upper bound for the width.
Between Breakpoints
There’re also media queries that can span multiple breakpoint widths:
@include media-breakpoint-between(md, xl) { ... }
which translates to:
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
Containers
Containers let us display things inside it.
It lets us pad and aligns content in a given device or viewport.
There are the container , container-sm , container-md , container-lg , container-xl , container-xxl , and container-fluid classes to size containers.
Default Container
The container class is a responsive fixed-width container.
For example, we can write:
<div class="container">
<!-- ... -->
</div>
to use it.
Responsive Containers
We can use the other classes with our containers to add responsive containers.
For example, we can write:
<div class="container-sm">small</div>
<div class="container-md">medium </div>
<div class="container-lg">large </div>
<div class="container-xl">extra large </div>
<div class="container-xxl">extra extra large </div>
to add them.
They’ll be 100% until they hit the breakpoints indicated by the infix in the class.
Fluid Containers
To add fluid containers that span the entire width of the viewport, we can use the container-fluid class:
<div class="container-fluid">
...
</div>
Grid System
The grid system lets us make things responsive by specifying how many columns of the grid it takes up.
It’s based on flexbox and it’s fully responsive.
For example, we can write:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
col-sm indicates that there will be 3 equal-width columns across all devices until it’s below the sm breakpoint.
The grid supports 6 responsive breakpoints.
They include sm , md , lg , xl , and xxl .
Containers can be centered horizontally to pad our content.
container is used for responsive pixel width.
container-fluid is width: 100% across all viewports and devices.
Rows are wrappers for columns.
Columns are spanned across 12 columns. There’re 12 of them per row.
Gutters are also responsive and customizable. They let us add space between columns.
.g-0 is used to remove guttersgx-* are used to change horizontal gutters.
.gy-* is used to add vertical gutters.
Conclusion
We can define our own layouts with containers, columns, and gutters.
They’re all responsive and mobile-first.
