rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Fixes #36550

Browse Source
This commit is contained in:
Mark Otto 2022-06-12 08:22:22 -07:00 committed by Mark Otto
parent 0a3864641b
commit a9ef305b81
1 changed files with 73 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
site/content/docs/5.2/layout/grid.md
View File

@ -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