mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-28 07:39:57 +02:00
Add v5.0.0 docs (#33648)
This commit is contained in:
XhmikosR
GitHub
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<title>Features · Bootstrap v5.0</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/features/">
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@@ -105,228 +105,231 @@
|
||||
<path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<main>
|
||||
<h1 class="visually-hidden">Features examples</h1>
|
||||
|
||||
<div class="container 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="feature-icon bg-primary bg-gradient">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
|
||||
</div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature col-md-4">
|
||||
<div class="feature-icon bg-primary bg-gradient">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
|
||||
</div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature col-md-4">
|
||||
<div class="feature-icon bg-primary bg-gradient">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
||||
</div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container 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="icon-square bg-light text-dark flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="container px-4 py-5" id="featured-3">
|
||||
<h2 class="pb-2 border-bottom">Columns with icons</h2>
|
||||
<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>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
<a href="#" class="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 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>
|
||||
<div>
|
||||
<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>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
<a href="#" class="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 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>
|
||||
<div>
|
||||
<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>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
<a href="#" class="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container 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="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">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>Earth</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>3d</small>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="container px-4 py-5" id="hanging-icons">
|
||||
<h2 class="pb-2 border-bottom">Hanging icons</h2>
|
||||
<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>
|
||||
<div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-2.jpg');">
|
||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>Pakistan</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>4d</small>
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
<div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-3.jpg');">
|
||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>California</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>5d</small>
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
<div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container py-5" id="icon-grid">
|
||||
<h2 class="pb-2 border-bottom">Icon grid</h2>
|
||||
<div class="container px-4 py-5" id="custom-cards">
|
||||
<h2 class="pb-2 border-bottom">Custom cards</h2>
|
||||
|
||||
<div class="row row-cols-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>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
<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">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>Earth</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>3d</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="#cpu-fill"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
|
||||
<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-2.jpg');">
|
||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>Pakistan</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>4d</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="#calendar3"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#home"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#speedometer2"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#toggles2"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#geo-fill"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#tools"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
|
||||
<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-3.jpg');">
|
||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>California</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>5d</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container px-4 py-5" id="icon-grid">
|
||||
<h2 class="pb-2 border-bottom">Icon grid</h2>
|
||||
|
||||
<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>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#cpu-fill"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#calendar3"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#home"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#speedometer2"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#toggles2"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#geo-fill"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="#tools"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user