Docs: replace CSS by utilities in examples (#35699)

* Drop .opacity-50 and .opacity-75 redefinition in examples

* Drop unused .card-img-right from blog example CSS files

* Use line-height utilities when possible

* Use rounded-* utilities in examples

* Replace .nav-underline by .nav-scroller and use it in examples.html default

* Use .mb-1 for .blog-post-title

* Remove unused CSS rule and use .fw-* utilities for carousels examples

* Use utilities for cheatsheet examples

* Extract some CSS to utilities for .nav-masthead .nav-link in cover example

* Dashboard group of minor modifications

* Dropdowns example: refactoring

* Dropdowns example refactoring: fix linting by removing selector by id

* Features example refactoring

* Headers example refactoring

* List groups example refactoring

* Sidebars example refactoring

* Sign-in example refactoring

* Starter template refactoring

* Fix RTL examples

Co-authored-by: Mark Otto <markd.otto@gmail.com>

site/content/docs/5.1/examples/dropdowns/dropdowns.css

@@ -1,20 +1,7 @@
 .dropdown-menu {
-  position: static;
-  display: block;
-  width: auto;
   margin: 4rem auto;
 }
 
-.dropdown-menu-macos {
-  display: grid;
-  gap: .25rem;
-  padding: .5rem;
-  border-radius: .5rem;
-}
-.dropdown-menu-macos .dropdown-item {
-  border-radius: .25rem;
-}
-
 .dropdown-item-danger {
   color: var(--bs-red);
 }
@@ -28,9 +15,7 @@
 }
 
 .btn-hover-light {
-  text-align: left;
   background-color: var(--bs-white);
-  border-radius: .25rem;
 }
 .btn-hover-light:hover,
 .btn-hover-light:focus {
@@ -74,3 +59,20 @@
   background-color: rgba(255, 255, 255, .05);
   border-color: rgba(255, 255, 255, .15);
 }
+
+
+.w-220px {
+  width: 220px;
+}
+
+.w-280px {
+  width: 280px;
+}
+
+.w-340px {
+  width: 340px;
+}
+
+.w-600px {
+  width: 600px;
+}

site/content/docs/5.1/examples/dropdowns/index.html

@@ -80,28 +80,27 @@ body_class: ""
   </symbol>
 </svg>
 
-<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownMacos">
-  <ul class="dropdown-menu dropdown-menu-macos mx-0 shadow" style="width: 220px;">
-    <li><a class="dropdown-item active" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
+<div class="d-flex gap-5 justify-content-center">
+  <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-4 mx-0 shadow w-220px">
+    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
     <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
   </ul>
-  <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-macos mx-0 border-0 shadow" style="width: 220px;">
-    <li><a class="dropdown-item active" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
+  <ul class="dropdown-menu dropdown-menu-dark position-static d-grid gap-1 p-2 rounded-4 mx-0 border-0 shadow w-220px">
+    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
     <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
   </ul>
 </div>
 
 <div class="b-example-divider"></div>
 
-
-<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownFilter">
-  <div class="dropdown-menu pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
+<div class="d-flex gap-5 justify-content-center">
+  <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
     <form class="p-2 mb-2 bg-light border-bottom">
       <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
     </form>
@@ -125,7 +124,7 @@ body_class: ""
     </ul>
   </div>
 
-  <div class="dropdown-menu dropdown-menu-dark border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
+  <div class="dropdown-menu dropdown-menu-dark d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
     <form class="p-2 mb-2 bg-dark border-bottom border-dark">
       <input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter...">
     </form>
@@ -152,8 +151,8 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownIcons">
-  <ul class="dropdown-menu mx-0 shadow" style="width: 220px;">
+<div class="d-flex gap-5 justify-content-center">
+  <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px">
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
         <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
@@ -192,7 +191,7 @@ body_class: ""
       </a>
     </li>
   </ul>
-  <ul class="dropdown-menu dropdown-menu-dark mx-0 border-0 shadow" style="width: 220px;">
+  <ul class="dropdown-menu dropdown-menu-dark d-block position-static mx-0 border-0 shadow w-220px">
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
         <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
@@ -235,7 +234,7 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="dropdown-menu p-2 shadow rounded-3" style="width: 340px" id="dropdownCalendar">
+<div class="dropdown-menu d-block position-static p-2 shadow rounded-3 w-340px">
   <div class="d-grid gap-1">
     <div class="cal">
       <div class="cal-month">
@@ -316,16 +315,16 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg dropdown" style="width: 600px" id="dropdownMega">
+<div class="dropdown-menu position-static d-flex align-items-stretch p-3 rounded-3 shadow-lg w-600px">
   <nav class="d-grid gap-2 col-8">
-    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
+    <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
       <svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg>
       <div>
         <strong class="d-block">Features</strong>
         <small>Take a tour through the product</small>
       </div>
     </a>
-    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
+    <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
       <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg>
       <div>
         <strong class="d-block">Support</strong>