root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 14 Packages Projects Releases Wiki Activity

Fix grid and alignment of Features example (#37502) 

Co-authored-by: Julien Déramond <juderamond@gmail.com>
This commit is contained in:
Vipin Mishra 2022-12-18 12:42:19 +05:30 committed by GitHub
parent 3e8c8868eb
commit 9d64a983ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
site/content/docs/5.2/examples/features/index.html
View File

@ -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>
<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">
<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="#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="#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="#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="#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>
<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>