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.
Note: The container has three types namely fixed-width container, fluid container & container having breakpoint.
To create a fixed container, use the .conatiner class. Please remember that this max-width will be responsive 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 |
A fixed width container has by default padding around the content.
Note: In this example,.container
class is assigned to the parent element base class. This is the process of creating the fixed-width container.
To create full width container that covers complete width(100% width) of the screen,use .container-fluid class
Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | XX-Large ≥1400px | |
---|---|---|---|---|---|---|
.container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
The container fluid covers the whole available width.
Note: To create bootstrap 5 full width container, assign .container-fluid
to the parent element base class.
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 |
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.