Bootstrap 5 Container
Bootstrap 5 container is the basic layout element in bootstrap that is used to create empty space (padding) around the content inside of them, and there is three container class available in bootstrap.
- The .container class provides a responsive fixed with container that has by default margin , left and right padding upto 15px.
- The .container-fluid class provides full with a container that covers the whole width of the device and has by default left and right padding up to 15px.
- The .container-{breakpoint}, that covers width: 100% until the specified breakpoint.
Note: The container has three types namely fixed-width container, fluid container & container having breakpoint.
Fixed Width(Container)
To create a fixed container, use the .conatiner class. Please remember that this max-width will be responsive with respect to device breakpoint.
Understand the max-width with respect to device breakpoint.
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | XX-Large ≥1400px | |
|---|---|---|---|---|---|---|
| .container | 100% | 540px | 720px | 960px | 1140px | 1320px |
General Syntax
Try it nowSource Code
Source Code : Output
Learn Bootstrap 5 Fixed Width Container
A fixed width container has by default padding around the content.
Code Explanation
Note: 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 full width container that covers complete width(100% width) of the screen,use .container-fluid class
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% |
General Syntax
Try it nowSource Code
Source Code : Output
Learn Bootstrap 5 Container Fluid
The container fluid covers the whole available width.
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 .container-sm provides 100% wide to start until the sm breakpoint is reached,Then it scale up with md, lg, xl, and xxl.
| 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 |
General Syntax
Try it nowSource Code
Source Code : Output
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.