Grid
Grid Options
|
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||||
| Max container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 24px (12px on each side of a column) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Offsets | Yes | |||||
| Column ordering | Yes | |||||
<div class="table-responsive">
<table class="table table-bordered table-striped table-nowrap mb-0">
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="text-center">
xs<br>
<span class="fw-normal"><576px</span>
</th>
<th scope="col" class="text-center">
sm<br>
<span class="fw-normal">≥576px</span>
</th>
<th scope="col" class="text-center">
md<br>
<span class="fw-normal">≥768px</span>
</th>
<th scope="col" class="text-center">
lg<br>
<span class="fw-normal">≥992px</span>
</th>
<th scope="col" class="text-center">
xl<br>
<span class="fw-normal">≥1200px</span>
</th>
<th scope="col" class="text-center">
xxl<br>
<span class="fw-normal">≥1400px</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-nowrap" scope="row">Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="5">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Max container width</th>
<td>None (auto)</td>
<td>540px</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
<td>1320px</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Class prefix</th>
<td><code>.col-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
<td><code>.col-xl-</code></td>
<td><code>.col-xxl-</code></td>
</tr>
<tr>
<th class="text-nowrap" scope="row"># of columns</th>
<td colspan="6">12</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Gutter width</th>
<td colspan="6">24px (12px on each side of a column)</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Custom gutters</th>
<td colspan="6">Yes</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Nestable</th>
<td colspan="6">Yes</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Offsets</th>
<td colspan="6">Yes</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Column ordering</th>
<td colspan="6">Yes</td>
</tr>
</tbody>
</table><!-- end table -->
</div><!-- end table responsive -->
Row Columns
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
<div class="row">
<div class="col-xl-4">
<div class="row row-cols-2 bg-light me-2">
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
</div><!-- end row -->
</div><!-- end col -->
<div class="col-xl-4">
<div class="row row-cols-3 bg-light me-2">
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
</div><!-- end row -->
</div><!-- end col -->
<div class="col-xl-4">
<div class="row row-cols-4 bg-light">
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
<div class="col-6 border py-3">Column</div>
<div class="col border py-3">Column</div>
</div><!-- end row -->
</div><!-- end col -->
<div class="col-xl-4">
<div class="row row-cols-auto bg-light mt-3 me-2">
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
</div><!-- end row -->
</div><!-- end col -->
<div class="col-xl-4">
<div class="row row-cols-4 bg-light mt-3 me-2">
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
</div><!-- end row -->
</div><!-- end col -->
<div class="col-xl-4">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 bg-light mt-3">
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
<div class="col border py-3">Column</div>
</div><!-- end row -->
</div><!-- end col -->
</div><!-- end row -->
Auto Layout Columns
Equal Width
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
Setting One Column Width
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
Variable Width Content
1 - 3
Variable width content
3 -3
1 - 3
Variable width content
3 - 3
<div class="row">
<div class="col-xl-4">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Equal Width</h4>
</div>
<div class="card-body">
<div class="row bg-light">
<div class="col py-3 border">
1 of 2
</div>
<div class="col py-3 border">
2 of 2
</div>
</div><!-- end row -->
<div class="row bg-light mt-3">
<div class="col py-3 border">
1 of 3
</div>
<div class="col py-3 border">
2 of 3
</div>
<div class="col py-3 border">
3 of 3
</div>
</div><!-- end row -->
</div><!-- end card body-->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xl-4">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Setting One Column Width</h4>
</div>
<div class="card-body">
<div class="row bg-light">
<div class="col py-3 border">
1 of 3
</div>
<div class="col-6 py-3 border">
2 of 3 (wider)
</div>
<div class="col py-3 border">
3 of 3
</div>
</div><!-- end row -->
<div class="row mt-3 bg-light">
<div class="col py-3 border">
1 of 3
</div>
<div class="col-5 py-3 border">
2 of 3 (wider)
</div>
<div class="col py-3 border">
3 of 3
</div>
</div><!-- end row -->
</div><!-- end card body-->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xl-4">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Variable Width Content</h4>
</div>
<div class="card-body">
<div class="row justify-content-md-center bg-light">
<div class="col col-lg-2 py-3 border">
1 - 3
</div>
<div class="col-md-auto py-3 border">
Variable width content
</div>
<div class="col col-lg-2 py-3 border">
3 -3
</div>
</div><!-- end row -->
<div class="row bg-light mt-3">
<div class="col py-3 border">
1 - 3
</div>
<div class="col-md-auto py-3 border">
Variable width content
</div>
<div class="col col-lg-2 py-3 border">
3 - 3
</div>
</div><!-- end row -->
</div><!-- end card body-->
</div><!-- end card -->
</div><!-- end col -->
</div><!-- end row -->
Responsive Classes
All Breakpoints
col
col
col
col
col-8
col-4
Stacked to Horizontal
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
Mix and Match
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-6
.col-6
<div class="row">
<div class="col-xl-4">
<div class="card mb-xl-0">
<div class="card-header">
<h4 class="card-title">All Breakpoints</h4>
</div>
<div class="card-body">
<div class="row bg-light">
<div class="col border py-3">col</div>
<div class="col border py-3">col</div>
<div class="col border py-3">col</div>
<div class="col border py-3">col</div>
</div><!-- end row -->
<div class="row bg-light mt-3">
<div class="col-8 border py-3">col-8</div>
<div class="col-4 border py-3">col-4</div>
</div><!-- end row -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xl-4">
<div class="card mb-xl-0">
<div class="card-header">
<h4 class="card-title">Stacked to Horizontal</h4>
</div>
<div class="card-body">
<div class="row bg-light">
<div class="col-sm-8 border py-3">col-sm-8</div>
<div class="col-sm-4 border py-3">col-sm-4</div>
</div><!-- end row -->
<div class="row bg-light mt-3">
<div class="col-sm border py-3">col-sm</div>
<div class="col-sm border py-3">col-sm</div>
<div class="col-sm border py-3">col-sm</div>
</div><!-- end row -->
</div><!-- end cardbody-->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xl-4">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Mix and Match</h4>
</div>
<div class="card-body">
<div class="row bg-light">
<div class="col-md-8 py-3 border">.col-md-8</div>
<div class="col-6 col-md-4 py-3 border">.col-md-4</div>
</div>
<div class="row mt-3 bg-light">
<div class="col-6 col-md-4 py-3 border">.col-md-4</div>
<div class="col-6 col-md-4 py-3 border">.col-md-4</div>
<div class="col-6 col-md-4 py-3 border">.col-md-4</div>
</div>
<div class="row mt-3 bg-light">
<div class="col-6 py-3 border">.col-6</div>
<div class="col-6 py-3 border">.col-6</div>
</div>
</div><!-- end cardbody-->
</div><!-- end card -->
</div><!-- end col -->
</div><!-- end row -->