diff options
| author | Vipin Mishra <[email protected]> | 2022-12-18 12:42:19 +0530 |
|---|---|---|
| committer | GitHub <[email protected]> | 2022-12-18 08:12:19 +0100 |
| commit | 9d64a983ee05eb84d0e793e359a7335cafaf3eb6 (patch) | |
| tree | c485b2f9b5eae689977627f7aa101691e3278c78 | |
| parent | 3e8c8868eb7e920f96cdfffd2452f2e8591f8390 (diff) | |
| download | bootstrap-9d64a983ee05eb84d0e793e359a7335cafaf3eb6.tar.xz bootstrap-9d64a983ee05eb84d0e793e359a7335cafaf3eb6.zip | |
Fix grid and alignment of Features example (#37502)
Co-authored-by: Julien Déramond <[email protected]>
| -rw-r--r-- | site/content/docs/5.2/examples/features/index.html | 73 |
1 files changed, 36 insertions, 37 deletions
diff --git a/site/content/docs/5.2/examples/features/index.html b/site/content/docs/5.2/examples/features/index.html index c134a0a91..35a4ef5da 100644 --- 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> |