Update grid doc for consistent use of container. (#27776)

site/docs/4.1/layout/grid.md

@@ -242,6 +242,7 @@ Create equal-width columns that span multiple rows by inserting a `.w-100` where
 
 <div class="bd-example-row">
 {% capture example %}
+<div class="container">
   <div class="row">
     <div class="col">col</div>
     <div class="col">col</div>
@@ -249,6 +250,7 @@ Create equal-width columns that span multiple rows by inserting a `.w-100` where
     <div class="col">col</div>
     <div class="col">col</div>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 </div>
@@ -263,6 +265,7 @@ For grids that are the same from the smallest of devices to the largest, use the
 
 <div class="bd-example-row">
 {% capture example %}
+<div class="container">
   <div class="row">
     <div class="col">col</div>
     <div class="col">col</div>
@@ -273,6 +276,7 @@ For grids that are the same from the smallest of devices to the largest, use the
     <div class="col-8">col-8</div>
     <div class="col-4">col-4</div>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 </div>
@@ -283,6 +287,7 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
 
 <div class="bd-example-row">
 {% capture example %}
+<div class="container">
   <div class="row">
     <div class="col-sm-8">col-sm-8</div>
     <div class="col-sm-4">col-sm-4</div>
@@ -292,6 +297,7 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
     <div class="col-sm">col-sm</div>
     <div class="col-sm">col-sm</div>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 </div>
@@ -302,6 +308,7 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
 
 <div class="bd-example-row">
 {% capture example %}
+<div class="container">
   <!-- Stack the columns on mobile by making one full-width and the other half-width -->
   <div class="row">
     <div class="col-12 col-md-8">.col-12 .col-md-8</div>
@@ -320,21 +327,24 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
     <div class="col-6">.col-6</div>
     <div class="col-6">.col-6</div>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 </div>
 
 ### Gutters
 
-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.
+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.
 
-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`.
+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`.
 
 {% capture example %}
+<div class="container px-lg-5">
   <div class="row mx-lg-n5">
     <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
     <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 
@@ -493,11 +503,13 @@ If more than 12 columns are placed within a single row, each group of extra colu
 
 <div class="bd-example-row">
 {% capture example %}
+<div class="container">
   <div class="row">
     <div class="col-9">.col-9</div>
     <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>
     <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 </div>
@@ -508,6 +520,7 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
 
 <div class="bd-example-row">
 {% capture example %}
+<div class="container">
   <div class="row">
     <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
     <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
@@ -518,6 +531,7 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
     <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
     <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 </div>
@@ -526,6 +540,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
 
 <div class="bd-example-row">
 {% capture example %}
+<div class="container">
   <div class="row">
     <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
     <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
@@ -536,6 +551,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
     <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
     <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 </div>
@@ -596,6 +612,7 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
 
 <div class="bd-example-row">
 {% capture example %}
+<div class="container">
   <div class="row">
     <div class="col-md-4">.col-md-4</div>
     <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
@@ -607,6 +624,7 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
   <div class="row">
     <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 </div>
@@ -615,15 +633,16 @@ In addition to column clearing at responsive breakpoints, you may need to reset
 
 <div class="bd-example-row">
 {% capture example %}
+<div class="container">
   <div class="row">
     <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
     <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>
   </div>
-
   <div class="row">
     <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
     <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>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 </div>
@@ -634,6 +653,7 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
 
 <div class="bd-example-row">
 {% capture example %}
+<div class="container">
   <div class="row">
     <div class="col-md-4">.col-md-4</div>
     <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
@@ -646,6 +666,7 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
     <div class="col-auto mr-auto">.col-auto .mr-auto</div>
     <div class="col-auto">.col-auto</div>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 </div>
@@ -656,6 +677,7 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
 
 <div class="bd-example-row">
 {% capture example %}
+<div class="container">
   <div class="row">
     <div class="col-sm-9">
       Level 1: .col-sm-9
@@ -669,6 +691,7 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
       </div>
     </div>
   </div>
+</div>
 {% endcapture %}
 {% include example.html content=example %}
 </div>