Containers
Preview
This is a preview of the Bootstrap element. For more details, please visit the official Bootstrap page.
Bootstrap pageHow they work
Bootstrap comes with three different containers:
- .container, which sets a max-width at each responsive breakpoint
- .container-fluid, which is width: 100% at all breakpoints
- .container-{breakpoint}, which is width: 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.
| Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|
|---|---|---|---|---|---|---|
| .container | 100% | 540px | 720px | 960px | 1140px | 1200px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1200px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1200px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1200px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1200px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1200px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |