Skip to content

Commit 8ee2065

Browse files
florianlacreuseXhmikosR
florianlacreuse
authored and
XhmikosR
committed
Update grid doc for consistent use of container. (twbs#27776)
1 parent dac464a commit 8ee2065

File tree

1 file changed

+122
-99
lines changed

1 file changed

+122
-99
lines changed

‎site/docs/4.1/layout/grid.md

+122-99
Original file line numberDiff line numberDiff line change
@@ -242,12 +242,14 @@ Create equal-width columns that span multiple rows by inserting a `.w-100` where
242242

243243
<div class="bd-example-row">
244244
{% capture example %}
245-
<div class="row">
246-
<div class="col">col</div>
247-
<div class="col">col</div>
248-
<div class="w-100"></div>
249-
<div class="col">col</div>
250-
<div class="col">col</div>
245+
<div class="container">
246+
<div class="row">
247+
<div class="col">col</div>
248+
<div class="col">col</div>
249+
<div class="w-100"></div>
250+
<div class="col">col</div>
251+
<div class="col">col</div>
252+
</div>
251253
</div>
252254
{% endcapture %}
253255
{% include example.html content=example %}
@@ -263,15 +265,17 @@ For grids that are the same from the smallest of devices to the largest, use the
263265

264266
<div class="bd-example-row">
265267
{% capture example %}
266-
<div class="row">
267-
<div class="col">col</div>
268-
<div class="col">col</div>
269-
<div class="col">col</div>
270-
<div class="col">col</div>
271-
</div>
272-
<div class="row">
273-
<div class="col-8">col-8</div>
274-
<div class="col-4">col-4</div>
268+
<div class="container">
269+
<div class="row">
270+
<div class="col">col</div>
271+
<div class="col">col</div>
272+
<div class="col">col</div>
273+
<div class="col">col</div>
274+
</div>
275+
<div class="row">
276+
<div class="col-8">col-8</div>
277+
<div class="col-4">col-4</div>
278+
</div>
275279
</div>
276280
{% endcapture %}
277281
{% include example.html content=example %}
@@ -283,14 +287,16 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
283287

284288
<div class="bd-example-row">
285289
{% capture example %}
286-
<div class="row">
287-
<div class="col-sm-8">col-sm-8</div>
288-
<div class="col-sm-4">col-sm-4</div>
289-
</div>
290-
<div class="row">
291-
<div class="col-sm">col-sm</div>
292-
<div class="col-sm">col-sm</div>
293-
<div class="col-sm">col-sm</div>
290+
<div class="container">
291+
<div class="row">
292+
<div class="col-sm-8">col-sm-8</div>
293+
<div class="col-sm-4">col-sm-4</div>
294+
</div>
295+
<div class="row">
296+
<div class="col-sm">col-sm</div>
297+
<div class="col-sm">col-sm</div>
298+
<div class="col-sm">col-sm</div>
299+
</div>
294300
</div>
295301
{% endcapture %}
296302
{% include example.html content=example %}
@@ -302,38 +308,42 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
302308

303309
<div class="bd-example-row">
304310
{% capture example %}
305-
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
306-
<div class="row">
307-
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
308-
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
309-
</div>
311+
<div class="container">
312+
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
313+
<div class="row">
314+
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
315+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
316+
</div>
310317

311-
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
312-
<div class="row">
313-
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
314-
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
315-
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
316-
</div>
318+
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
319+
<div class="row">
320+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
321+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
322+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
323+
</div>
317324

318-
<!-- Columns are always 50% wide, on mobile and desktop -->
319-
<div class="row">
320-
<div class="col-6">.col-6</div>
321-
<div class="col-6">.col-6</div>
325+
<!-- Columns are always 50% wide, on mobile and desktop -->
326+
<div class="row">
327+
<div class="col-6">.col-6</div>
328+
<div class="col-6">.col-6</div>
329+
</div>
322330
</div>
323331
{% endcapture %}
324332
{% include example.html content=example %}
325333
</div>
326334

327335
### Gutters
328336

329-
Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the `.row` and matching padding utilities on the `.col`s.
337+
Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the `.row` and matching padding utilities on the `.col`s. The `.container` or `.container-fluid` parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.
330338

331-
Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoint and above. We've increased the `.col` padding with `.px-lg-5` and then counteracted that with `.mx-lg-n5` on the parent `.row`.
339+
Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoint and above. We've increased the `.col` padding with `.px-lg-5`, counteracted that with `.mx-lg-n5` on the parent `.row` and then adjusted the `.container` wrapper with `.px-lg-5`.
332340

333341
{% capture example %}
334-
<div class="row mx-lg-n5">
335-
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
336-
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
342+
<div class="container px-lg-5">
343+
<div class="row mx-lg-n5">
344+
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
345+
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
346+
</div>
337347
</div>
338348
{% endcapture %}
339349
{% include example.html content=example %}
@@ -493,10 +503,12 @@ If more than 12 columns are placed within a single row, each group of extra colu
493503

494504
<div class="bd-example-row">
495505
{% capture example %}
496-
<div class="row">
497-
<div class="col-9">.col-9</div>
498-
<div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
499-
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
506+
<div class="container">
507+
<div class="row">
508+
<div class="col-9">.col-9</div>
509+
<div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
510+
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
511+
</div>
500512
</div>
501513
{% endcapture %}
502514
{% include example.html content=example %}
@@ -508,15 +520,17 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
508520

509521
<div class="bd-example-row">
510522
{% capture example %}
511-
<div class="row">
512-
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
513-
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
523+
<div class="container">
524+
<div class="row">
525+
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
526+
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
514527

515-
<!-- Force next columns to break to new line -->
516-
<div class="w-100"></div>
528+
<!-- Force next columns to break to new line -->
529+
<div class="w-100"></div>
517530

518-
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
519-
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
531+
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
532+
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
533+
</div>
520534
</div>
521535
{% endcapture %}
522536
{% include example.html content=example %}
@@ -526,15 +540,17 @@ You may also apply this break at specific breakpoints with our [responsive displ
526540

527541
<div class="bd-example-row">
528542
{% capture example %}
529-
<div class="row">
530-
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
531-
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
543+
<div class="container">
544+
<div class="row">
545+
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
546+
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
532547

533-
<!-- Force next columns to break to new line at md breakpoint and up -->
534-
<div class="w-100 d-none d-md-block"></div>
548+
<!-- Force next columns to break to new line at md breakpoint and up -->
549+
<div class="w-100 d-none d-md-block"></div>
535550

536-
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
537-
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
551+
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
552+
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
553+
</div>
538554
</div>
539555
{% endcapture %}
540556
{% include example.html content=example %}
@@ -596,16 +612,18 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
596612

597613
<div class="bd-example-row">
598614
{% capture example %}
599-
<div class="row">
600-
<div class="col-md-4">.col-md-4</div>
601-
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
602-
</div>
603-
<div class="row">
604-
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
605-
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
606-
</div>
607-
<div class="row">
608-
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
615+
<div class="container">
616+
<div class="row">
617+
<div class="col-md-4">.col-md-4</div>
618+
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
619+
</div>
620+
<div class="row">
621+
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
622+
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
623+
</div>
624+
<div class="row">
625+
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
626+
</div>
609627
</div>
610628
{% endcapture %}
611629
{% include example.html content=example %}
@@ -615,14 +633,15 @@ In addition to column clearing at responsive breakpoints, you may need to reset
615633

616634
<div class="bd-example-row">
617635
{% capture example %}
618-
<div class="row">
619-
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
620-
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
621-
</div>
622-
623-
<div class="row">
624-
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
625-
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
636+
<div class="container">
637+
<div class="row">
638+
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
639+
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
640+
</div>
641+
<div class="row">
642+
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
643+
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
644+
</div>
626645
</div>
627646
{% endcapture %}
628647
{% include example.html content=example %}
@@ -634,17 +653,19 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
634653

635654
<div class="bd-example-row">
636655
{% capture example %}
637-
<div class="row">
638-
<div class="col-md-4">.col-md-4</div>
639-
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
640-
</div>
641-
<div class="row">
642-
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
643-
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
644-
</div>
645-
<div class="row">
646-
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
647-
<div class="col-auto">.col-auto</div>
656+
<div class="container">
657+
<div class="row">
658+
<div class="col-md-4">.col-md-4</div>
659+
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
660+
</div>
661+
<div class="row">
662+
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
663+
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
664+
</div>
665+
<div class="row">
666+
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
667+
<div class="col-auto">.col-auto</div>
668+
</div>
648669
</div>
649670
{% endcapture %}
650671
{% include example.html content=example %}
@@ -656,15 +677,17 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
656677

657678
<div class="bd-example-row">
658679
{% capture example %}
659-
<div class="row">
660-
<div class="col-sm-9">
661-
Level 1: .col-sm-9
662-
<div class="row">
663-
<div class="col-8 col-sm-6">
664-
Level 2: .col-8 .col-sm-6
665-
</div>
666-
<div class="col-4 col-sm-6">
667-
Level 2: .col-4 .col-sm-6
680+
<div class="container">
681+
<div class="row">
682+
<div class="col-sm-9">
683+
Level 1: .col-sm-9
684+
<div class="row">
685+
<div class="col-8 col-sm-6">
686+
Level 2: .col-8 .col-sm-6
687+
</div>
688+
<div class="col-4 col-sm-6">
689+
Level 2: .col-4 .col-sm-6
690+
</div>
668691
</div>
669692
</div>
670693
</div>

0 commit comments

Comments
 (0)