Bootstrap Containers - Containers in Bootstrap with examples
Containers
- Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
How they work
- Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
- Containers are used to contain, pad, and center the content within them.
Bootstrap Containers
- .container, which sets a max-width at each responsive breakpoint
- .container-{breakpoint}, which is width: 100% until the specified breakpoint
- .container-fluid, which is width: 100% at all breakpoints
| 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
- 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
- .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
- .container-fluid for a full width container, spanning the entire width of the viewport.
<div class="container-fluid">
...
</div>