See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}).
-<table class="table text-left">
+<table class="table">
<thead>
<tr>
- <th></th>
- <th>
+ <td class="border-dark"></td>
+ <th scope="col">
Extra small<br>
<span class="font-weight-normal"><576px</span>
</th>
- <th>
+ <th scope="col">
Small<br>
<span class="font-weight-normal">≥576px</span>
</th>
- <th>
+ <th scope="col">
Medium<br>
<span class="font-weight-normal">≥768px</span>
</th>
- <th>
+ <th scope="col">
Large<br>
<span class="font-weight-normal">≥992px</span>
</th>
- <th>
+ <th scope="col">
X-Large<br>
<span class="font-weight-normal">≥1200px</span>
</th>
- <th>
+ <th scope="col">
XX-Large<br>
<span class="font-weight-normal">≥1400px</span>
</th>
</thead>
<tbody>
<tr>
- <td><code>.container</code></td>
+ <th scope="row" class="font-weight-normal"><code>.container</code></th>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
<td>1320px</td>
</tr>
<tr>
- <td><code>.container-sm</code></td>
+ <th scope="row" class="font-weight-normal"><code>.container-sm</code></th>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
<td>1320px</td>
</tr>
<tr>
- <td><code>.container-md</code></td>
+ <th scope="row" class="font-weight-normal"><code>.container-md</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>720px</td>
<td>1320px</td>
</tr>
<tr>
- <td><code>.container-lg</code></td>
+ <th scope="row" class="font-weight-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>1320px</td>
</tr>
<tr>
- <td><code>.container-xl</code></td>
+ <th scope="row" class="font-weight-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>1320px</td>
</tr>
<tr>
- <td><code>.container-xxl</code></td>
+ <th scope="row" class="font-weight-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>1320px</td>
</tr>
<tr>
- <td><code>.container-fluid</code></td>
+ <th scope="row" class="font-weight-normal"><code>.container-fluid</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>