diff options
author | Mark Otto <markdotto@gmail.com> | 2021-04-07 07:25:37 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2021-04-07 07:51:38 +0300 |
commit | 800aa622d378865a9fd3d094913091651918dfbb (patch) | |
tree | 04f438cd97e688bf9662322e1e14e5892253e974 /site/content/docs/5.0 | |
parent | 1de0d94130074e085b0611fa79380a2f8d4e89dd (diff) |
Improve responsiveness of Features examples
Diffstat (limited to 'site/content/docs/5.0')
-rw-r--r-- | site/content/docs/5.0/examples/features/index.html | 28 |
1 files changed, 14 insertions, 14 deletions
diff --git a/site/content/docs/5.0/examples/features/index.html b/site/content/docs/5.0/examples/features/index.html index de4e00f6d2..3c174a0100 100644 --- a/site/content/docs/5.0/examples/features/index.html +++ b/site/content/docs/5.0/examples/features/index.html @@ -65,10 +65,10 @@ body_class: "" </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> @@ -79,7 +79,7 @@ body_class: "" <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> @@ -90,7 +90,7 @@ body_class: "" <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> @@ -106,10 +106,10 @@ body_class: "" <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> @@ -121,7 +121,7 @@ body_class: "" </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> @@ -133,7 +133,7 @@ body_class: "" </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> @@ -150,10 +150,10 @@ body_class: "" <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"> @@ -221,10 +221,10 @@ body_class: "" <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> |