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.

Sign up for GitHub

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

Jump to bottom

Improve responsiveness of Features examples #33569

Merged
merged 1 commit into from Apr 7, 2021
Merged

Improve responsiveness of Features examples #33569

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
28 changes: 14 additions & 14 deletions site/content/docs/5.0/examples/features/index.html
View file
Open in desktop
Expand Up @@ -65,10 +65,10 @@
</symbol>
</svg>

<div class="container py-5" id="featured-3">
<div class="container px-4 py-5" id="featured-3">
<h2 class="pb-2 border-bottom">Columns with icons</h2>
<div class="row g-5 py-5">
<div class="feature col-md-4">
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div class="feature-icon bg-primary bg-gradient">
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
</div>
Expand All @@ -79,7 +79,7 @@ <h2>Featured title</h2>
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="feature col-md-4">
<div class="feature col">
<div class="feature-icon bg-primary bg-gradient">
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
</div>
Expand All @@ -90,7 +90,7 @@ <h2>Featured title</h2>
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="feature col-md-4">
<div class="feature col">
<div class="feature-icon bg-primary bg-gradient">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div>
Expand All @@ -106,10 +106,10 @@ <h2>Featured title</h2>

<div class="b-example-divider"></div>

<div class="container py-5" id="hanging-icons">
<div class="container px-4 py-5" id="hanging-icons">
<h2 class="pb-2 border-bottom">Hanging icons</h2>
<div class="row g-5 py-5">
<div class="col-md-4 d-flex align-items-start">
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start">
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div>
Expand All @@ -121,7 +121,7 @@ <h2>Featured title</h2>
</a>
</div>
</div>
<div class="col-md-4 d-flex align-items-start">
<div class="col d-flex align-items-start">
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
</div>
Expand All @@ -133,7 +133,7 @@ <h2>Featured title</h2>
</a>
</div>
</div>
<div class="col-md-4 d-flex align-items-start">
<div class="col d-flex align-items-start">
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
</div>
Expand All @@ -150,10 +150,10 @@ <h2>Featured title</h2>

<div class="b-example-divider"></div>

<div class="container py-5" id="custom-cards">
<div class="container px-4 py-5" id="custom-cards">
<h2 class="pb-2 border-bottom">Custom cards</h2>

<div class="row row-cols-3 align-items-stretch py-5">
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
Expand Down Expand Up @@ -221,10 +221,10 @@ <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs h

<div class="b-example-divider"></div>

<div class="container py-5" id="icon-grid">
<div class="container px-4 py-5" id="icon-grid">
<h2 class="pb-2 border-bottom">Icon grid</h2>

<div class="row row-cols-4 g-4 py-5">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
<div class="col d-flex align-items-start">
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
<div>
Expand Down