Update examples to the Bootstrap 5 grid

1 files changed, 12 insertions, 12 deletions

diff --git a/site/content/docs/4.3/examples/offcanvas/index.html b/site/content/docs/4.3/examples/offcanvas/index.html
index 442aa844e..bb26ffc58 100644
--- 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>