Update examples to the Bootstrap 5 grid

df8f64d1 · Martijn Cuppens · 9daf36fd · df8f64d1 · df8f64d1 · df8f64d1
Commit df8f64d1 authored 5 years ago by Martijn Cuppens
Hide whitespace changes
Inline Side-by-side

Showing

with 173 additions and 124 deletions
+173 -124
--- a/site/content/docs/4.3/examples/album/index.html
+++ b/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>

--- a/site/content/docs/4.3/examples/blog/index.html
+++ b/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>

--- a/site/content/docs/4.3/examples/carousel/index.html
+++ b/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>

--- a/site/content/docs/4.3/examples/checkout/index.html
+++ b/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>

--- a/site/content/docs/4.3/examples/grid/grid.css
+++ b/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);
 }
--- a/site/content/docs/4.3/examples/grid/index.html
+++ b/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>

--- a/site/content/docs/4.3/examples/navbar-bottom/index.html
+++ b/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>

--- a/site/content/docs/4.3/examples/navbar-fixed/index.html
+++ b/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>

--- a/site/content/docs/4.3/examples/navbar-static/index.html
+++ b/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>

--- a/site/content/docs/4.3/examples/navbars/index.html
+++ b/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>

--- a/site/content/docs/4.3/examples/offcanvas/index.html
+++ b/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>

--- a/site/content/docs/4.3/examples/starter-template/index.html
+++ b/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>

--- a/site/content/docs/4.3/examples/sticky-footer-navbar/index.html
+++ b/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>