Containers
Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
Containers
| 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.
Use .container-fluid for a full width container, spanning the entire width of the viewport.
<div class="container">
<!-- Content here -->
</div>
Grid system
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
<div class="row">
<div class="col bg-light border p-3">
Column
</div>
<div class="col bg-light border p-3">
Column
</div>
<div class="col bg-light border p-3">
Column
</div>
</div>
Nesting
To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
<div class="row">
<div class="col-sm-3 bg-light border p-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9 py-2">
<div class="row">
<div class="col-8 col-sm-6 bg-light border p-3">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6 bg-light border p-3">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
