Bootstrap Containers
Bootstrap containers are the basic layout element in the Bootstrap grid system that is used to create empty space (padding) around the content.
Bootstrap 5 Container Types
There are mainly three types of bootstrap containers such as fixed-width containers, full-width containers (container fluid), and responsive containers.
- The
.containerclass provides a responsive fixed-width container that has a default margin and left and right padding up to 15px. - The
.container-fluidclass provides full with a container that covers the whole width of the device and has a default left and right padding up to 15px. -
The responsive container i.e.
.container-{breakpoint}, covers width: 100% until the specified breakpoint.
Container (Fixed Width)
To create a fixed-width container, use the .container class. Please remember that this max-width will be responsive with respect to device breakpoint.
Container (Fixed Width)
Understand The Max Width With Respect To The Device Breakpoint.
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | XX-Large ≥1400px | |
|---|---|---|---|---|---|---|
| .container | 100% | 540px | 720px | 960px | 1140px | 1320px |
Source Code
<div class="container bg-light text-center mt-5">
<h2>Learn Bootstrap 5 Fixed Width Container</h2>
<p>
A fixed width container has by default padding around the content.
</p>
</div>
Code Explanation
In this example, .container class is assigned to the parent element base class. This is the process of creating the fixed-width container.
Full Width Container (Fluid Container)
To create a full-width fluid container that covers the complete width(100% width) of the screen, use the .container-fluid class.
Fluid Container(Full Width)
Max Width With Respect To Device Breakpoint.
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | XX-Large ≥1400px | |
|---|---|---|---|---|---|---|
| .container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Source Code
<div class="container-fluid bg-light text-center">
<h3>Learn Bootstrap 5 Container Fluid</h3>
<p>The container fluid covers the whole available width.</p>
</div>
Code Explanation
Note: To create bootstrap 5 full width container, assign .container-fluid to the parent element base class.
Bootstrap 5 Responsive Container
Bootstrap 5 responsive container provides flexibility to display 100% width until the specified breakpoint is reached, then it applies max-width for each higher breakpoint.
For example, the .container-sm class provides 100% width to start until the sm breakpoint is reached. Then, it scales up with md, lg, xl, and xxl.
100% wide until small breakpoint
100% wide until medium breakpoint
100% wide until large breakpoint
100% wide until extra-large breakpoint
100% wide until extra extra-large breakpoint
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | XX-Large ≥1400px | |
|---|---|---|---|---|---|---|
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
Source Code
<div class="container mt-5">
<div class="container-sm bg-success">
100% wide until small breakpoint
</div>
<br />
<div class="container-md bg-warning">
100% wide until medium breakpoint
</div>
<br />
<div class="container-lg bg-danger">
100% wide until large breakpoint
</div>
<br />
<div class="container-xl bg-dark text-white">
100% wide until extra large breakpoint
</div>
<br />
<div class="container-xxl bg-info">
100% wide until extra extra large breakpoint
</div>
</div>
<!--/container-->
Code Explanation
Note: In this example, the responsive container concept is used to create 100% width until the specified breakpoint is reached, then it applies max-width for each higher breakpoint.
Web Tutorials
