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>
