diff options
| author | Mark Otto <[email protected]> | 2022-06-12 08:22:22 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2022-06-13 08:31:59 -0700 |
| commit | a9ef305b8175ae610c213b65e68711a0e43534b7 (patch) | |
| tree | 463d0526dee0a5d2aa1d639055182292427a88e5 | |
| parent | 0a3864641b5cbd27a0b7eff153ef661f3eda3802 (diff) | |
| download | bootstrap-a9ef305b8175ae610c213b65e68711a0e43534b7.tar.xz bootstrap-a9ef305b8175ae610c213b65e68711a0e43534b7.zip | |
Fixes #36550
| -rw-r--r-- | site/content/docs/5.2/layout/grid.md | 144 |
1 files changed, 73 insertions, 71 deletions
diff --git a/site/content/docs/5.2/layout/grid.md b/site/content/docs/5.2/layout/grid.md index 765b7eb60..9d147239f 100644 --- a/site/content/docs/5.2/layout/grid.md +++ b/site/content/docs/5.2/layout/grid.md @@ -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"><576px</span> - </th> - <th scope="col"> - sm<br> - <span class="fw-normal">≥576px</span> - </th> - <th scope="col"> - md<br> - <span class="fw-normal">≥768px</span> - </th> - <th scope="col"> - lg<br> - <span class="fw-normal">≥992px</span> - </th> - <th scope="col"> - xl<br> - <span class="fw-normal">≥1200px</span> - </th> - <th scope="col"> - xxl<br> - <span class="fw-normal">≥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"><576px</span> + </th> + <th scope="col"> + sm<br> + <span class="fw-normal">≥576px</span> + </th> + <th scope="col"> + md<br> + <span class="fw-normal">≥768px</span> + </th> + <th scope="col"> + lg<br> + <span class="fw-normal">≥992px</span> + </th> + <th scope="col"> + xl<br> + <span class="fw-normal">≥1200px</span> + </th> + <th scope="col"> + xxl<br> + <span class="fw-normal">≥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 |