Skip to content

Commit

Permalink
Fixes #36550
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo
mdo committed Jun 13, 2022
1 parent 0a38646 commit a9ef305
Showing 1 changed file with 73 additions and 71 deletions.
144 changes: 73 additions & 71 deletions site/content/docs/5.2/layout/grid.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,77 +63,79 @@ Bootstrap's grid system can adapt across all six default breakpoints, and any br

As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:

<table class="table mb-4">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">
xs<br>
<span class="fw-normal">&lt;576px</span>
</th>
<th scope="col">
sm<br>
<span class="fw-normal">&ge;576px</span>
</th>
<th scope="col">
md<br>
<span class="fw-normal">&ge;768px</span>
</th>
<th scope="col">
lg<br>
<span class="fw-normal">&ge;992px</span>
</th>
<th scope="col">
xl<br>
<span class="fw-normal">&ge;1200px</span>
</th>
<th scope="col">
xxl<br>
<span class="fw-normal">&ge;1400px</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></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">1.5rem (.75rem on left and right)</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Custom gutters</th>
<td colspan="6"><a href="{{< docsref "/layout/gutters" >}}">Yes</a></td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Nestable</th>
<td colspan="6"><a href="#nesting">Yes</a></td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Column ordering</th>
<td colspan="6"><a href="{{< docsref "/layout/columns#reordering" >}}">Yes</a></td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table mb-4">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">
xs<br>
<span class="fw-normal">&lt;576px</span>
</th>
<th scope="col">
sm<br>
<span class="fw-normal">&ge;576px</span>
</th>
<th scope="col">
md<br>
<span class="fw-normal">&ge;768px</span>
</th>
<th scope="col">
lg<br>
<span class="fw-normal">&ge;992px</span>
</th>
<th scope="col">
xl<br>
<span class="fw-normal">&ge;1200px</span>
</th>
<th scope="col">
xxl<br>
<span class="fw-normal">&ge;1400px</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></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">1.5rem (.75rem on left and right)</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Custom gutters</th>
<td colspan="6"><a href="{{< docsref "/layout/gutters" >}}">Yes</a></td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Nestable</th>
<td colspan="6"><a href="#nesting">Yes</a></td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Column ordering</th>
<td colspan="6"><a href="{{< docsref "/layout/columns#reordering" >}}">Yes</a></td>
</tr>
</tbody>
</table>
</div>

## Auto-layout columns

Expand Down

0 comments on commit a9ef305

Please sign in to comment.