]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Backport #28679.
authorMartijn Cuppens <martijn.cuppens@gmail.com>
Wed, 8 May 2019 16:58:29 +0000 (18:58 +0200)
committerXhmikosR <xhmikosr@gmail.com>
Thu, 9 May 2019 18:30:32 +0000 (21:30 +0300)
* Documentation tweaks
* Remove redundant `col-12` classes

js/tests/integration/index.html
site/_layouts/docs.html
site/docs/4.3/examples/grid/index.html
site/docs/4.3/layout/grid.md
site/index.html

index e5b33a84dcd474a2796b328f3b65e96981b78ec6..f82ddbebe564b4ebc8d70dcd49d66eb33b974135 100644 (file)
@@ -13,8 +13,8 @@
   <body>
     <div class="container">
       <h1>Hello, world!</h1>
-      <div class="col-12">
-        <div class="mt-5 mb-3">
+      <div class="mt-5">
+        <div class="mb-3">
           <span>Util.getUID: </span>
           <span id="resultUID"></span>
         </div>
index cc4910c0412581330d366a629643ccfe76048ef8..b9381923bc0f541d15447cf2047194e9eb379af0 100644 (file)
@@ -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 %}
index b41090438d2241a97262b0b3e1f0d641be1777e1..9ea83e44605f81583d78a7fd8034f4e0bce0d7a2 100644 (file)
@@ -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>
index a6f4ac5ab4c3b5d79bec394c10c4ad329203fc06..4cad4ac3bd0f9af683e3559015637ea360081bf3 100644 (file)
@@ -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 %}
index df50c7291c24d09d4e559173f2e9c7de8f4daafa..9c284c991cd0a63a924bc73395354e6a854d01b7 100644 (file)
@@ -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>