Skip to content

Commit a9ef305

Browse files
mdomdo
committed
Fixes #36550
1 parent 0a38646 commit a9ef305

File tree

1 file changed

+73
-71
lines changed
  • site/content/docs/5.2/layout

1 file changed

+73
-71
lines changed

‎site/content/docs/5.2/layout/grid.md

Lines changed: 73 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -63,77 +63,79 @@ Bootstrap's grid system can adapt across all six default breakpoints, and any br
6363

6464
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:
6565

66-
<table class="table mb-4">
67-
<thead>
68-
<tr>
69-
<th scope="col"></th>
70-
<th scope="col">
71-
xs<br>
72-
<span class="fw-normal">&lt;576px</span>
73-
</th>
74-
<th scope="col">
75-
sm<br>
76-
<span class="fw-normal">&ge;576px</span>
77-
</th>
78-
<th scope="col">
79-
md<br>
80-
<span class="fw-normal">&ge;768px</span>
81-
</th>
82-
<th scope="col">
83-
lg<br>
84-
<span class="fw-normal">&ge;992px</span>
85-
</th>
86-
<th scope="col">
87-
xl<br>
88-
<span class="fw-normal">&ge;1200px</span>
89-
</th>
90-
<th scope="col">
91-
xxl<br>
92-
<span class="fw-normal">&ge;1400px</span>
93-
</th>
94-
</tr>
95-
</thead>
96-
<tbody>
97-
<tr>
98-
<th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th>
99-
<td>None (auto)</td>
100-
<td>540px</td>
101-
<td>720px</td>
102-
<td>960px</td>
103-
<td>1140px</td>
104-
<td>1320px</td>
105-
</tr>
106-
<tr>
107-
<th class="text-nowrap" scope="row">Class prefix</th>
108-
<td><code>.col-</code></td>
109-
<td><code>.col-sm-</code></td>
110-
<td><code>.col-md-</code></td>
111-
<td><code>.col-lg-</code></td>
112-
<td><code>.col-xl-</code></td>
113-
<td><code>.col-xxl-</code></td>
114-
</tr>
115-
<tr>
116-
<th class="text-nowrap" scope="row"># of columns</th>
117-
<td colspan="6">12</td>
118-
</tr>
119-
<tr>
120-
<th class="text-nowrap" scope="row">Gutter width</th>
121-
<td colspan="6">1.5rem (.75rem on left and right)</td>
122-
</tr>
123-
<tr>
124-
<th class="text-nowrap" scope="row">Custom gutters</th>
125-
<td colspan="6"><a href="{{< docsref "/layout/gutters" >}}">Yes</a></td>
126-
</tr>
127-
<tr>
128-
<th class="text-nowrap" scope="row">Nestable</th>
129-
<td colspan="6"><a href="#nesting">Yes</a></td>
130-
</tr>
131-
<tr>
132-
<th class="text-nowrap" scope="row">Column ordering</th>
133-
<td colspan="6"><a href="{{< docsref "/layout/columns#reordering" >}}">Yes</a></td>
134-
</tr>
135-
</tbody>
136-
</table>
66+
<div class="table-responsive">
67+
<table class="table mb-4">
68+
<thead>
69+
<tr>
70+
<th scope="col"></th>
71+
<th scope="col">
72+
xs<br>
73+
<span class="fw-normal">&lt;576px</span>
74+
</th>
75+
<th scope="col">
76+
sm<br>
77+
<span class="fw-normal">&ge;576px</span>
78+
</th>
79+
<th scope="col">
80+
md<br>
81+
<span class="fw-normal">&ge;768px</span>
82+
</th>
83+
<th scope="col">
84+
lg<br>
85+
<span class="fw-normal">&ge;992px</span>
86+
</th>
87+
<th scope="col">
88+
xl<br>
89+
<span class="fw-normal">&ge;1200px</span>
90+
</th>
91+
<th scope="col">
92+
xxl<br>
93+
<span class="fw-normal">&ge;1400px</span>
94+
</th>
95+
</tr>
96+
</thead>
97+
<tbody>
98+
<tr>
99+
<th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th>
100+
<td>None (auto)</td>
101+
<td>540px</td>
102+
<td>720px</td>
103+
<td>960px</td>
104+
<td>1140px</td>
105+
<td>1320px</td>
106+
</tr>
107+
<tr>
108+
<th class="text-nowrap" scope="row">Class prefix</th>
109+
<td><code>.col-</code></td>
110+
<td><code>.col-sm-</code></td>
111+
<td><code>.col-md-</code></td>
112+
<td><code>.col-lg-</code></td>
113+
<td><code>.col-xl-</code></td>
114+
<td><code>.col-xxl-</code></td>
115+
</tr>
116+
<tr>
117+
<th class="text-nowrap" scope="row"># of columns</th>
118+
<td colspan="6">12</td>
119+
</tr>
120+
<tr>
121+
<th class="text-nowrap" scope="row">Gutter width</th>
122+
<td colspan="6">1.5rem (.75rem on left and right)</td>
123+
</tr>
124+
<tr>
125+
<th class="text-nowrap" scope="row">Custom gutters</th>
126+
<td colspan="6"><a href="{{< docsref "/layout/gutters" >}}">Yes</a></td>
127+
</tr>
128+
<tr>
129+
<th class="text-nowrap" scope="row">Nestable</th>
130+
<td colspan="6"><a href="#nesting">Yes</a></td>
131+
</tr>
132+
<tr>
133+
<th class="text-nowrap" scope="row">Column ordering</th>
134+
<td colspan="6"><a href="{{< docsref "/layout/columns#reordering" >}}">Yes</a></td>
135+
</tr>
136+
</tbody>
137+
</table>
138+
</div>
137139

138140
## Auto-layout columns
139141

0 commit comments

Comments
 (0)