mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-20 20:00:36 +03:00
Rewrite docs tables in Markdown with table shortcode (#31337)
Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: GeoSot <geo.sotis@gmail.com>
This commit is contained in:
@@ -20,102 +20,17 @@ The table below illustrates how each container's `max-width` compares to the ori
|
||||
|
||||
See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}).
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="border-dark"></td>
|
||||
<th scope="col">
|
||||
Extra small<br>
|
||||
<span class="fw-normal"><576px</span>
|
||||
</th>
|
||||
<th scope="col">
|
||||
Small<br>
|
||||
<span class="fw-normal">≥576px</span>
|
||||
</th>
|
||||
<th scope="col">
|
||||
Medium<br>
|
||||
<span class="fw-normal">≥768px</span>
|
||||
</th>
|
||||
<th scope="col">
|
||||
Large<br>
|
||||
<span class="fw-normal">≥992px</span>
|
||||
</th>
|
||||
<th scope="col">
|
||||
X-Large<br>
|
||||
<span class="fw-normal">≥1200px</span>
|
||||
</th>
|
||||
<th scope="col">
|
||||
XX-Large<br>
|
||||
<span class="fw-normal">≥1400px</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" class="fw-normal"><code>.container</code></th>
|
||||
<td class="text-muted">100%</td>
|
||||
<td>540px</td>
|
||||
<td>720px</td>
|
||||
<td>960px</td>
|
||||
<td>1140px</td>
|
||||
<td>1320px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="fw-normal"><code>.container-sm</code></th>
|
||||
<td class="text-muted">100%</td>
|
||||
<td>540px</td>
|
||||
<td>720px</td>
|
||||
<td>960px</td>
|
||||
<td>1140px</td>
|
||||
<td>1320px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="fw-normal"><code>.container-md</code></th>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td>720px</td>
|
||||
<td>960px</td>
|
||||
<td>1140px</td>
|
||||
<td>1320px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="fw-normal"><code>.container-lg</code></th>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td>960px</td>
|
||||
<td>1140px</td>
|
||||
<td>1320px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="fw-normal"><code>.container-xl</code></th>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td>1140px</td>
|
||||
<td>1320px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="fw-normal"><code>.container-xxl</code></th>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td>1320px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="fw-normal"><code>.container-fluid</code></th>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
<td class="text-muted">100%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{< bs-table "table" >}}
|
||||
| | Extra small<div class="fw-normal"><576px</div> | Small<div class="fw-normal">≥576px</div> | Medium<div class="fw-normal">≥768px</div> | Large<div class="fw-normal">≥992px</div> | X-Large<div class="fw-normal">≥1200px</div> | XX-Large<div class="fw-normal">≥1400px</div> |
|
||||
| --- | --- | --- | --- | --- | --- | --- |
|
||||
| `.container` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
|
||||
| `.container-sm` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
|
||||
| `.container-md` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 720px | 960px | 1140px | 1320px |
|
||||
| `.container-lg` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 960px | 1140px | 1320px |
|
||||
| `.container-xl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1140px | 1320px |
|
||||
| `.container-xxl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1320px |
|
||||
| `.container-fluid` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> |
|
||||
{{< /bs-table >}}
|
||||
|
||||
## Default container
|
||||
|
||||
|
||||
Reference in New Issue
Block a user