Containers
Bootstrap 5 Containers component
Responsive containers built with Bootstrap 5. Create flexible, user-friendly layouts with intuitive, responsive container elements for any web design.
How it works
Containers are the most basic layout element in Bootstrap and are required when using default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. Although containers can be nested, most layouts do not require a nested container.
There are three different containers available in Bootstrap:
-
.container
, which sets amax-width
at each responsive breakpoint .container-fluid
, which iswidth: 100%
at all breakpoints-
.container-{breakpoint}
, which iswidth: 100%
until the specified breakpoint
The table below illustrates how each container's max-width
compares to the
original .container
and .container-fluid
across each breakpoint.
See them in action and compare them in our Grid example.
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.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 |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Default container
Our default .container
class is a responsive, fixed-width container, meaning its
max-width
changes at each breakpoint.
<div class="container">
<!-- Content here -->
</div>
Responsive containers
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint
is reached, after which we apply max-width
s for each of the higher
breakpoints. For example, .container-sm
is 100% wide to start until the
sm
breakpoint is reached, where it will scale up with md
,
lg
, xl
, and xxl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Fluid containers
Use .container-fluid
to get a full width container that covers the entire width of the viewport.
<div class="container-fluid">
...
</div>