Fix grid and alignment of Features example (#37502)

Co-authored-by: Julien Déramond <juderamond@gmail.com>

diff --git a/site/content/docs/5.2/examples/features/index.html b/site/content/docs/5.2/examples/features/index.html
index c134a0a919bd2a7aaa1c3493bfe17bd34c74c390..35a4ef5da0dbffb79f242f7fec5c58b61739bede 100644 (file)
--- a/site/content/docs/5.2/examples/features/index.html
+++ b/site/content/docs/5.2/examples/features/index.html
@@ -292,54 +292,53 @@ body_class: ""
     <h2 class="pb-2 border-bottom">Features with title</h2>
 
     <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
-      <div class="d-flex flex-column align-items-start gap-2">
+      <div class="col d-flex flex-column align-items-start gap-2">
         <h3 class="fw-bold">Left-aligned title explaining these awesome features</h3>
         <p class="text-muted">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="btn btn-primary btn-lg">Primary button</a>
       </div>
-      <div class="row row-cols-1 row-cols-sm-2 g-4">
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#collection" />
-            </svg>
+
+      <div class="col">
+        <div class="row row-cols-1 row-cols-sm-2 g-4">
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#collection" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
+            <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
-        </div>
 
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#gear-fill" />
-            </svg>
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#gear-fill" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
+            <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
-        </div>
 
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#speedometer" />
-            </svg>
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#speedometer" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
+            <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
-        </div>
 
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#table" />
-            </svg>
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#table" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
+            <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
     </div>