rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Added new example in examples/features page. (#36660)

Browse Source 
* Added new example in examples/features

* Fix indentation, other suggested changes from review

* fix: heading structure
This commit is contained in:
Vipin Mishra 2022-08-04 10:22:41 +05:30 committed by GitHub
parent e57a94cd66
commit 9e57dfadac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
site/content/docs/5.2/examples/features/features.css
View File

@ -29,3 +29,8 @@
background-position: center center;
background-size: cover;
}
.feature-icon-small {
width: 3rem;
height: 3rem;
}

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

@ -285,4 +285,63 @@ body_class: ""
</div>
</div>
</div>
<div class="b-example-divider"></div>
<div class="container px-4 py-5">
<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">
<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>
<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>
<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>
<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>
</div>
</main>