Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix grid and alignment in examples/features #37502

Merged
merged 13 commits into from
Dec 18, 2022

Conversation

thevipinmishra
Copy link
Contributor

@thevipinmishra thevipinmishra commented Nov 16, 2022

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]

Screenshot 2022-12-15 at 22 25 03

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

Copy link
Member

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copy link
Member

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thanks for the PR :)

@julien-deramond julien-deramond merged commit 9d64a98 into twbs:main Dec 18, 2022
@XhmikosR XhmikosR changed the title Fix grid and alignment in examples/features Fix grid and alignment in examples/features Dec 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants