Backport #28679.

* Documentation tweaks
* Remove redundant `col-12` classes

4 files changed, 12 insertions, 12 deletions

diff --git a/site/_layouts/docs.html b/site/_layouts/docs.html
index cc4910c041..b9381923bc 100644
--- a/site/_layouts/docs.html
+++ b/site/_layouts/docs.html
@@ -10,7 +10,7 @@
 
     <div class="container-fluid">
       <div class="row flex-xl-nowrap">
-        <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
+        <div class="col-md-3 col-xl-2 bd-sidebar">
           {% include docs-sidebar.html %}
         </div>
 
@@ -20,7 +20,7 @@
           </nav>
         {% endif %}
 
-        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
+        <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
           <h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
           <p class="bd-lead">{{ page.description | smartify }}</p>
           {% include ads.html %}
diff --git a/site/docs/4.3/examples/grid/index.html b/site/docs/4.3/examples/grid/index.html
index b41090438d..9ea83e4460 100644
--- a/site/docs/4.3/examples/grid/index.html
+++ b/site/docs/4.3/examples/grid/index.html
@@ -94,10 +94,10 @@ include_js: false
   <hr class="my-4">
 
   <h2 class="mt-4">Mixed: mobile and desktop</h2>
-  <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
-  <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
+  <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
+  <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.</p>
   <div class="row mb-3">
-    <div class="col-12 col-md-8 themed-grid-col">.col-12 .col-md-8</div>
+    <div class="col-md-8 themed-grid-col">.col-md-8</div>
     <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
   </div>
   <div class="row mb-3">
@@ -114,7 +114,7 @@ include_js: false
 
   <h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
   <div class="row mb-3">
-    <div class="col-12 col-sm-6 col-lg-8 themed-grid-col">.col-12 .col-sm-6 .col-lg-8</div>
+    <div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div>
     <div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
   </div>
   <div class="row mb-3">
@@ -123,4 +123,4 @@ include_js: false
     <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
   </div>
 
-</div> <!-- /container -->
+</div>
diff --git a/site/docs/4.3/layout/grid.md b/site/docs/4.3/layout/grid.md
index a6f4ac5ab4..4cad4ac3bd 100644
--- a/site/docs/4.3/layout/grid.md
+++ b/site/docs/4.3/layout/grid.md
@@ -311,7 +311,7 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
 <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>
+    <div class="col-md-8">.col-md-8</div>
     <div class="col-6 col-md-4">.col-6 .col-md-4</div>
   </div>
 
@@ -490,7 +490,7 @@ In practice, here's how it looks. Note you can continue to use this with all oth
 <div class="bd-example-row">
 {% capture example %}
 <div class="row no-gutters">
-  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
+  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 </div>
 {% endcapture %}
diff --git a/site/index.html b/site/index.html
index df50c7291c..9c284c991c 100644
--- a/site/index.html
+++ b/site/index.html
@@ -34,7 +34,7 @@ layout: home
 </main>
 
 <div class="masthead-followup row m-0 border border-white">
-  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
     <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
     {% include icons/import.svg width="32" height="32" class="text-primary mb-2" %}
     <h3>Installation</h3>
@@ -52,7 +52,7 @@ gem install bootstrap -v {{ site.current_ruby_version }}
     <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/">Read installation docs</a>
   </div>
 
-  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
     <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
     {% include icons/download.svg width="32" height="32" class="text-primary mb-2" %}
     <h3>BootstrapCDN</h3>
@@ -73,7 +73,7 @@ gem install bootstrap -v {{ site.current_ruby_version }}
     <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
   </div>
 
-  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
     <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
     {% include icons/lightning.svg width="32" height="32" class="text-primary mb-2" %}
     <h3>Official Themes</h3>