Update examples to the Bootstrap 5 grid

site/content/docs/4.3/examples/album/index.html

@@ -53,9 +53,9 @@ title: Album example
   <div class="album py-5 bg-light">
     <div class="container">
 
-      <div class="row">
-        <div class="col-md-4">
-          <div class="card mb-4 shadow-sm">
+      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+        <div class="col">
+          <div class="card shadow-sm">
             {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -69,8 +69,8 @@ title: Album example
             </div>
           </div>
         </div>
-        <div class="col-md-4">
-          <div class="card mb-4 shadow-sm">
+        <div class="col">
+          <div class="card shadow-sm">
             {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -84,8 +84,8 @@ title: Album example
             </div>
           </div>
         </div>
-        <div class="col-md-4">
-          <div class="card mb-4 shadow-sm">
+        <div class="col">
+          <div class="card shadow-sm">
             {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -100,8 +100,8 @@ title: Album example
           </div>
         </div>
 
-        <div class="col-md-4">
-          <div class="card mb-4 shadow-sm">
+        <div class="col">
+          <div class="card shadow-sm">
             {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -115,8 +115,8 @@ title: Album example
             </div>
           </div>
         </div>
-        <div class="col-md-4">
-          <div class="card mb-4 shadow-sm">
+        <div class="col">
+          <div class="card shadow-sm">
             {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -130,8 +130,8 @@ title: Album example
             </div>
           </div>
         </div>
-        <div class="col-md-4">
-          <div class="card mb-4 shadow-sm">
+        <div class="col">
+          <div class="card shadow-sm">
             {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -146,8 +146,8 @@ title: Album example
           </div>
         </div>
 
-        <div class="col-md-4">
-          <div class="card mb-4 shadow-sm">
+        <div class="col">
+          <div class="card shadow-sm">
             {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -161,8 +161,8 @@ title: Album example
             </div>
           </div>
         </div>
-        <div class="col-md-4">
-          <div class="card mb-4 shadow-sm">
+        <div class="col">
+          <div class="card shadow-sm">
             {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -176,8 +176,8 @@ title: Album example
             </div>
           </div>
         </div>
-        <div class="col-md-4">
-          <div class="card mb-4 shadow-sm">
+        <div class="col">
+          <div class="card shadow-sm">
             {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

site/content/docs/4.3/examples/blog/index.html

@@ -52,7 +52,7 @@ include_js: false
 
   <div class="row mb-2">
     <div class="col-md-6">
-      <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
           <strong class="d-inline-block mb-2 text-primary">World</strong>
           <h3 class="mb-0">Featured post</h3>
@@ -66,7 +66,7 @@ include_js: false
       </div>
     </div>
     <div class="col-md-6">
-      <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
           <strong class="d-inline-block mb-2 text-success">Design</strong>
           <h3 class="mb-0">Post title</h3>

site/content/docs/4.3/examples/carousel/index.html

@@ -13,7 +13,7 @@ extra_css:
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarCollapse">
-        <ul class="navbar-nav mr-auto">
+        <ul class="navbar-nav mr-auto mb-2 mb-md-0">
           <li class="nav-item active">
             <a class="nav-link" aria-current="page" href="#">Home</a>
           </li>
@@ -24,9 +24,9 @@ extra_css:
             <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
           </li>
         </ul>
-        <form class="form-inline mt-2 mt-md-0">
-          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+        <form class="d-flex">
+          <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-outline-success" type="submit">Search</button>
         </form>
       </div>
     </div>

site/content/docs/4.3/examples/checkout/index.html

@@ -2,7 +2,7 @@
 layout: examples
 title: Checkout example
 extra_css:
-  - "form-validation.css"
+- "form-validation.css"
 extra_js:
   - src: "form-validation.js"
 body_class: "bg-light"
@@ -15,8 +15,8 @@ body_class: "bg-light"
     <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
   </div>
 
-  <div class="row">
-    <div class="col-md-4 order-md-2 mb-4">
+  <div class="row g-3">
+    <div class="col-md-5 col-lg-4 order-md-last">
       <h4 class="d-flex justify-content-between align-items-center mb-3">
         <span class="text-muted">Your cart</span>
         <span class="badge bg-secondary rounded-pill">3</span>
@@ -65,62 +65,61 @@ body_class: "bg-light"
         </div>
       </form>
     </div>
-    <div class="col-md-8 order-md-1">
+    <div class="col-md-7 col-lg-8">
       <h4 class="mb-3">Billing address</h4>
       <form class="needs-validation" novalidate>
-        <div class="row">
-          <div class="col-md-6 mb-3">
+        <div class="row g-3">
+          <div class="col-sm-6">
             <label for="firstName">First name</label>
             <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
             <div class="invalid-feedback">
               Valid first name is required.
             </div>
           </div>
-          <div class="col-md-6 mb-3">
+
+          <div class="col-sm-6">
             <label for="lastName">Last name</label>
             <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
             <div class="invalid-feedback">
               Valid last name is required.
             </div>
           </div>
-        </div>
 
-        <div class="mb-3">
-          <label for="username">Username</label>
-          <div class="input-group">
-            <div class="input-group-prepend">
-              <span class="input-group-text">@</span>
-            </div>
-            <input type="text" class="form-control" id="username" placeholder="Username" required>
-            <div class="invalid-feedback w-100">
-              Your username is required.
+          <div class="col-12">
+            <label for="username">Username</label>
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <span class="input-group-text">@</span>
+              </div>
+              <input type="text" class="form-control" id="username" placeholder="Username" required>
+              <div class="invalid-feedback w-100">
+                Your username is required.
+              </div>
             </div>
           </div>
-        </div>
 
-        <div class="mb-3">
-          <label for="email">Email <span class="text-muted">(Optional)</span></label>
-          <input type="email" class="form-control" id="email" placeholder="you@example.com">
-          <div class="invalid-feedback">
-            Please enter a valid email address for shipping updates.
+          <div class="col-12">
+            <label for="email">Email <span class="text-muted">(Optional)</span></label>
+            <input type="email" class="form-control" id="email" placeholder="you@example.com">
+            <div class="invalid-feedback">
+              Please enter a valid email address for shipping updates.
+            </div>
           </div>
-        </div>
 
-        <div class="mb-3">
-          <label for="address">Address</label>
-          <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
-          <div class="invalid-feedback">
-            Please enter your shipping address.
+          <div class="col-12">
+            <label for="address">Address</label>
+            <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
+            <div class="invalid-feedback">
+              Please enter your shipping address.
+            </div>
           </div>
-        </div>
 
-        <div class="mb-3">
-          <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
-          <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
-        </div>
+          <div class="col-12">
+            <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
+            <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
+          </div>
 
-        <div class="row">
-          <div class="col-md-5 mb-3">
+          <div class="col-md-5">
             <label for="country">Country</label>
             <select class="form-select" id="country" required>
               <option value="">Choose...</option>
@@ -130,7 +129,8 @@ body_class: "bg-light"
               Please select a valid country.
             </div>
           </div>
-          <div class="col-md-4 mb-3">
+
+          <div class="col-md-4">
             <label for="state">State</label>
             <select class="form-select" id="state" required>
               <option value="">Choose...</option>
@@ -140,7 +140,8 @@ body_class: "bg-light"
               Please provide a valid state.
             </div>
           </div>
-          <div class="col-md-3 mb-3">
+
+          <div class="col-md-3">
             <label for="zip">Zip</label>
             <input type="text" class="form-control" id="zip" placeholder="" required>
             <div class="invalid-feedback">
@@ -148,20 +149,24 @@ body_class: "bg-light"
             </div>
           </div>
         </div>
-        <hr class="mb-4">
+
+        <hr class="my-4">
+
         <div class="form-check">
           <input type="checkbox" class="form-check-input" id="same-address">
           <label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
         </div>
+
         <div class="form-check">
           <input type="checkbox" class="form-check-input" id="save-info">
           <label class="form-check-label" for="save-info">Save this information for next time</label>
         </div>
-        <hr class="mb-4">
+
+        <hr class="my-4">
 
         <h4 class="mb-3">Payment</h4>
 
-        <div class="d-block my-3">
+        <div class="my-3">
           <div class="form-check">
             <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
             <label class="form-check-label" for="credit">Credit card</label>
@@ -175,8 +180,9 @@ body_class: "bg-light"
             <label class="form-check-label" for="paypal">PayPal</label>
           </div>
         </div>
-        <div class="row">
-          <div class="col-md-6 mb-3">
+
+        <div class="row gy-3">
+          <div class="col-md-6">
             <label for="cc-name">Name on card</label>
             <input type="text" class="form-control" id="cc-name" placeholder="" required>
             <small class="text-muted">Full name as displayed on card</small>
@@ -184,23 +190,24 @@ body_class: "bg-light"
               Name on card is required
             </div>
           </div>
-          <div class="col-md-6 mb-3">
+
+          <div class="col-md-6">
             <label for="cc-number">Credit card number</label>
             <input type="text" class="form-control" id="cc-number" placeholder="" required>
             <div class="invalid-feedback">
               Credit card number is required
             </div>
           </div>
-        </div>
-        <div class="row">
-          <div class="col-md-3 mb-3">
+
+          <div class="col-md-3">
             <label for="cc-expiration">Expiration</label>
             <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
             <div class="invalid-feedback">
               Expiration date required
             </div>
           </div>
-          <div class="col-md-3 mb-3">
+
+          <div class="col-md-3">
             <label for="cc-cvv">CVV</label>
             <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
             <div class="invalid-feedback">
@@ -208,7 +215,9 @@ body_class: "bg-light"
             </div>
           </div>
         </div>
-        <hr class="mb-4">
+
+        <hr class="my-4">
+
         <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
       </form>
     </div>

site/content/docs/4.3/examples/grid/grid.css

 .themed-grid-col {
-  padding-top: 15px;
-  padding-bottom: 15px;
+  padding-top: .75rem;
+  padding-bottom: .75rem;
   background-color: rgba(86, 61, 124, .15);
   border: 1px solid rgba(86, 61, 124, .2);
 }
 
 .themed-container {
-  padding: 15px;
-  margin-bottom: 30px;
+  padding: .75rem;
+  margin-bottom: 1.5rem;
   background-color: rgba(0, 123, 255, .15);
   border: 1px solid rgba(0, 123, 255, .2);
 }

site/content/docs/4.3/examples/grid/index.html

@@ -54,6 +54,14 @@ include_js: false
     <div class="col-md-4 themed-grid-col">.col-md-4</div>
   </div>
 
+  <h2 class="mt-4">Three equal columns alternative</h2>
+  <p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
+  <div class="row row-cols-md-3 mb-3">
+    <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
+    <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
+    <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
+  </div>
+
   <h2 class="mt-4">Three unequal columns</h2>
   <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
   <div class="row mb-3">
@@ -124,9 +132,41 @@ include_js: false
     <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
   </div>
 
+  <hr class="my-4">
+
+  <h2 class="mt-4">Gutters</h2>
+  <p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
+  <div class="row row-cols-1 row-cols-md-3 gx-4">
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+  </div>
+  <p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
+  <div class="row row-cols-1 row-cols-md-3 gy-4">
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+  </div>
+  <p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
+  <div class="row row-cols-1 row-cols-md-3 g-3">
+    <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+    <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+  </div>
 </div>
 
 <div class="container" id="containers">
+  <hr class="my-4">
+
   <h2 class="mt-4">Containers</h2>
   <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p>
 </div>

site/content/docs/4.3/examples/navbar-bottom/index.html

@@ -17,7 +17,7 @@ title: Bottom navbar example
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarCollapse">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Home</a>
         </li>

site/content/docs/4.3/examples/navbar-fixed/index.html

@@ -12,7 +12,7 @@ extra_css:
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarCollapse">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav mr-auto mb-2 mb-md-0">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Home</a>
         </li>
@@ -23,9 +23,9 @@ extra_css:
           <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
         </li>
       </ul>
-      <form class="form-inline mt-2 mt-md-0">
-        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+      <form class="d-flex">
+        <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
+        <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
     </div>
   </div>

site/content/docs/4.3/examples/navbar-static/index.html

@@ -12,7 +12,7 @@ extra_css:
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarCollapse">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav mr-auto mb-2 mb-md-0">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Home</a>
         </li>
@@ -23,9 +23,9 @@ extra_css:
           <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
         </li>
       </ul>
-      <form class="form-inline mt-2 mt-md-0">
-        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+      <form class="d-flex">
+        <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
+        <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
     </div>
   </div>

site/content/docs/4.3/examples/navbars/index.html

@@ -13,7 +13,7 @@ extra_css:
     </button>
 
     <div class="collapse navbar-collapse" id="navbarsExample01">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav mr-auto mb-2">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Home</a>
         </li>
@@ -32,7 +32,7 @@ extra_css:
           </div>
         </li>
       </ul>
-      <form class="form-inline my-2 my-md-0">
+      <form>
         <input class="form-control" type="text" placeholder="Search" aria-label="Search">
       </form>
     </div>
@@ -55,7 +55,7 @@ extra_css:
           <a class="nav-link" href="#">Link</a>
         </li>
       </ul>
-      <form class="form-inline my-2 my-md-0">
+      <form>
         <input class="form-control" type="text" placeholder="Search">
       </form>
     </div>
@@ -70,7 +70,7 @@ extra_css:
     </button>
 
     <div class="collapse navbar-collapse" id="navbarsExample03">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav mr-auto mb-2 mb-sm-0">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Home</a>
         </li>
@@ -89,7 +89,7 @@ extra_css:
           </div>
         </li>
       </ul>
-      <form class="form-inline my-2 my-md-0">
+      <form>
         <input class="form-control" type="text" placeholder="Search">
       </form>
     </div>
@@ -104,7 +104,7 @@ extra_css:
     </button>
 
     <div class="collapse navbar-collapse" id="navbarsExample04">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav mr-auto mb-2 mb-md-0">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Home</a>
         </li>
@@ -123,7 +123,7 @@ extra_css:
           </div>
         </li>
       </ul>
-      <form class="form-inline my-2 my-md-0">
+      <form>
         <input class="form-control" type="text" placeholder="Search">
       </form>
     </div>
@@ -138,7 +138,7 @@ extra_css:
     </button>
 
     <div class="collapse navbar-collapse" id="navbarsExample05">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Home</a>
         </li>
@@ -157,7 +157,7 @@ extra_css:
           </div>
         </li>
       </ul>
-      <form class="form-inline my-2 my-md-0">
+      <form>
         <input class="form-control" type="text" placeholder="Search">
       </form>
     </div>
@@ -172,7 +172,7 @@ extra_css:
     </button>
 
     <div class="collapse navbar-collapse" id="navbarsExample06">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav mr-auto mb-2 mb-xl-0">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Home</a>
         </li>
@@ -191,7 +191,7 @@ extra_css:
           </div>
         </li>
       </ul>
-      <form class="form-inline my-2 my-md-0">
+      <form>
         <input class="form-control" type="text" placeholder="Search">
       </form>
     </div>
@@ -206,7 +206,7 @@ extra_css:
     </button>
 
     <div class="collapse navbar-collapse" id="navbarsExample07">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Home</a>
         </li>
@@ -225,7 +225,7 @@ extra_css:
           </div>
         </li>
       </ul>
-      <form class="form-inline my-2 my-md-0">
+      <form>
         <input class="form-control" type="text" placeholder="Search" aria-label="Search">
       </form>
     </div>
@@ -240,7 +240,7 @@ extra_css:
     </button>
 
     <div class="collapse navbar-collapse" id="navbarsExample07XL">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Home</a>
         </li>
@@ -259,7 +259,7 @@ extra_css:
           </div>
         </li>
       </ul>
-      <form class="form-inline my-2 my-md-0">
+      <form>
         <input class="form-control" type="text" placeholder="Search" aria-label="Search">
       </form>
     </div>
@@ -309,7 +309,7 @@ extra_css:
       </button>
 
       <div class="collapse navbar-collapse" id="navbarsExample09">
-        <ul class="navbar-nav mr-auto">
+        <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
           <li class="nav-item active">
             <a class="nav-link" aria-current="page" href="#">Home</a>
           </li>
@@ -328,7 +328,7 @@ extra_css:
             </div>
           </li>
         </ul>
-        <form class="form-inline my-2 my-md-0">
+        <form>
           <input class="form-control" type="text" placeholder="Search" aria-label="Search">
         </form>
       </div>

site/content/docs/4.3/examples/offcanvas/index.html

@@ -16,7 +16,7 @@ body_class: "bg-light"
     </button>
 
     <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Dashboard</a>
         </li>
@@ -38,9 +38,9 @@ body_class: "bg-light"
           </div>
         </li>
       </ul>
-      <form class="form-inline my-2 my-lg-0">
-        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+      <form class="d-flex">
+        <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
+        <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
     </div>
   </div>
@@ -73,24 +73,24 @@ body_class: "bg-light"
   </div>
 
   <div class="my-3 p-3 bg-white rounded shadow-sm">
-    <h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
+    <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
     <div class="d-flex text-muted pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
-      <p class="pb-3 mb-0 small lh-sm border-bottom border-gray">
+      <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
       </p>
     </div>
     <div class="d-flex text-muted pt-3">
       {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 mr-2 rounded" >}}
-      <p class="pb-3 mb-0 small lh-sm border-bottom border-gray">
+      <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
       </p>
     </div>
     <div class="d-flex text-muted pt-3">
       {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 mr-2 rounded" >}}
-      <p class="pb-3 mb-0 small lh-sm border-bottom border-gray">
+      <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
       </p>
@@ -101,10 +101,10 @@ body_class: "bg-light"
   </div>
 
   <div class="my-3 p-3 bg-white rounded shadow-sm">
-    <h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6>
+    <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
     <div class="d-flex text-muted pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
-      <div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100">
+      <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
           <strong class="text-gray-dark">Full Name</strong>
           <a href="#">Follow</a>
@@ -114,7 +114,7 @@ body_class: "bg-light"
     </div>
     <div class="d-flex text-muted pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
-      <div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100">
+      <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
           <strong class="text-gray-dark">Full Name</strong>
           <a href="#">Follow</a>
@@ -124,7 +124,7 @@ body_class: "bg-light"
     </div>
     <div class="d-flex text-muted pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
-      <div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100">
+      <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
           <strong class="text-gray-dark">Full Name</strong>
           <a href="#">Follow</a>

site/content/docs/4.3/examples/starter-template/index.html

@@ -13,7 +13,7 @@ extra_css:
     </button>
 
     <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav mr-auto mb-2 mb-md-0">
         <li class="nav-item active">
           <a class="nav-link" aria-current="page" href="#">Home</a>
         </li>
@@ -32,9 +32,9 @@ extra_css:
           </div>
         </li>
       </ul>
-      <form class="form-inline my-2 my-lg-0">
-        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
+      <form class="d-flex">
+        <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
+        <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
     </div>
   </div>

site/content/docs/4.3/examples/sticky-footer-navbar/index.html

@@ -16,7 +16,7 @@ body_class: "d-flex flex-column h-100"
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarCollapse">
-        <ul class="navbar-nav mr-auto">
+        <ul class="navbar-nav mr-auto mb-2 mb-md-0">
           <li class="nav-item active">
             <a class="nav-link" aria-current="page" href="#">Home</a>
           </li>
@@ -27,9 +27,9 @@ body_class: "d-flex flex-column h-100"
             <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
           </li>
         </ul>
-        <form class="form-inline mt-2 mt-md-0">
-          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+        <form class="d-flex">
+          <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-outline-success" type="submit">Search</button>
         </form>
       </div>
     </div>