Fix grid and alignment in examples/features

[thevipinmishra]

Description

This fixes the grid and alignment issues from the features example that I added with #36660

Motivation & Context

I was looking at the example preview on mobile and the alignment looked a little off, the features grid on mobile was little bit off towards left and upon inspection, I found that the col classes under row row-cols-* were missing and was causing alignment issues overall.

[edited by maintainer to add a screenshot]

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-37502--twbs-bootstrap.netlify.app/docs/5.2/examples/features/

[julien-deramond]

Yes indeed, the rendering is way better like this. Thanks @thevipinmishra for this PR.
Just a small modification to do IMO regarding the indentation.

[julien-deramond]

Just few modifications due to a previous automatic formatting I suppose. Could you please integrate these modifications? And it's going to be OK on my side for the review :)

diff --git a/site/content/docs/5.2/examples/features/index.html b/site/content/docs/5.2/examples/features/index.html
index d32c446b3..35a4ef5da 100644
--- a/site/content/docs/5.2/examples/features/index.html
+++ b/site/content/docs/5.2/examples/features/index.html
@@ -294,16 +294,14 @@ body_class: ""
     <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
       <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>
+        <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="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">
+            <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>
@@ -313,8 +311,7 @@ body_class: ""
           </div>
 
           <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">
+            <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>
@@ -324,8 +321,7 @@ body_class: ""
           </div>
 
           <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">
+            <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>
@@ -335,8 +331,7 @@ body_class: ""
           </div>
 
           <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">
+            <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>

[julien-deramond]

LGTM! Thanks for the PR :)