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

Improve responsiveness of Features examples

Browse Source
This commit is contained in:
Mark Otto 2021-04-06 21:25:37 -07:00 committed by Mark Otto
parent 1de0d94130
commit 800aa622d3
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
site/content/docs/5.0/examples/features/index.html
View File

@ -65,10 +65,10 @@ body_class: ""
</symbol> </symbol>
</svg> </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> <h2 class="pb-2 border-bottom">Columns with icons</h2>
<div class="row g-5 py-5"> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col-md-4"> <div class="feature col">
<div class="feature-icon bg-primary bg-gradient"> <div class="feature-icon bg-primary bg-gradient">
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
</div> </div>
@ -79,7 +79,7 @@ body_class: ""
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="feature col-md-4"> <div class="feature col">
<div class="feature-icon bg-primary bg-gradient"> <div class="feature-icon bg-primary bg-gradient">
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
</div> </div>
@ -90,7 +90,7 @@ body_class: ""
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="feature col-md-4"> <div class="feature col">
<div class="feature-icon bg-primary bg-gradient"> <div class="feature-icon bg-primary bg-gradient">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div> </div>
@ -106,10 +106,10 @@ body_class: ""
<div class="b-example-divider"></div> <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> <h2 class="pb-2 border-bottom">Hanging icons</h2>
<div class="row g-5 py-5"> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<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"> <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> <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div> </div>
@ -121,7 +121,7 @@ body_class: ""
</a> </a>
</div> </div>
</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"> <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> <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
</div> </div>
@ -133,7 +133,7 @@ body_class: ""
</a> </a>
</div> </div>
</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"> <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> <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
</div> </div>
@ -150,10 +150,10 @@ body_class: ""
<div class="b-example-divider"></div> <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> <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="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="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"> <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
@ -221,10 +221,10 @@ body_class: ""
<div class="b-example-divider"></div> <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> <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"> <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> <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
<div> <div>