diff --git a/site/content/docs/5.1/examples/dropdowns/index.html b/site/content/docs/5.1/examples/dropdowns/index.html
index 5296d1507e..861e816670 100644
--- a/site/content/docs/5.1/examples/dropdowns/index.html
+++ b/site/content/docs/5.1/examples/dropdowns/index.html
@@ -107,19 +107,19 @@ body_class: ""
     </form>
     <ul class="list-unstyled mb-0">
       <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span>
+        <span class="d-inline-block bg-success rounded-circle p-1"></span>
         Action
       </a></li>
       <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span>
+        <span class="d-inline-block bg-primary rounded-circle p-1"></span>
         Another action
       </a></li>
       <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span>
+        <span class="d-inline-block bg-danger rounded-circle p-1"></span>
         Something else here
       </a></li>
       <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span>
+        <span class="d-inline-block bg-info rounded-circle p-1"></span>
         Separated link
       </a></li>
     </ul>
@@ -131,19 +131,19 @@ body_class: ""
     </form>
     <ul class="list-unstyled mb-0">
       <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span>
+        <span class="d-inline-block bg-success rounded-circle p-1"></span>
         Action
       </a></li>
       <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span>
+        <span class="d-inline-block bg-primary rounded-circle p-1"></span>
         Another action
       </a></li>
       <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span>
+        <span class="d-inline-block bg-danger rounded-circle p-1"></span>
         Something else here
       </a></li>
       <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span>
+        <span class="d-inline-block bg-info rounded-circle p-1"></span>
         Separated link
       </a></li>
     </ul>
@@ -336,4 +336,4 @@ body_class: ""
   <div class="col-4">
     ...
   </div>
-</div>
\ No newline at end of file
+</div>