Source: dist/css/cardiosmart_boot.css, line 15422
3.7 Components
Out of the box html components from bootstrap
Example
Accordion
Documentation
This is the first
item's accordion
body. It is
hidden by default, until the
collapse plugin adds the
appropriate classes that we
use to style each element.
These classes control the
overall appearance, as well
as the showing and hiding
via CSS transitions. You can
modify any of this with
custom CSS or overriding our
default variables. It's also
worth noting that just about
any HTML can go within the
.accordion-body,
though the transition does
limit overflow.
This is the second
item's accordion
body. It is
hidden by default, until the
collapse plugin adds the
appropriate classes that we
use to style each element.
These classes control the
overall appearance, as well
as the showing and hiding
via CSS transitions. You can
modify any of this with
custom CSS or overriding our
default variables. It's also
worth noting that just about
any HTML can go within the
.accordion-body,
though the transition does
limit overflow.
This is the third
item's accordion
body. It is
hidden by default, until the
collapse plugin adds the
appropriate classes that we
use to style each element.
These classes control the
overall appearance, as well
as the showing and hiding
via CSS transitions. You can
modify any of this with
custom CSS or overriding our
default variables. It's also
worth noting that just about
any HTML can go within the
.accordion-body,
though the transition does
limit overflow.Alerts
DocumentationA simple primary alert
with an example
link. Give it a click if you
like.
A simple secondary alert
with an example
link. Give it a click if you
like.
A simple success alert
with an example
link. Give it a click if you
like.
A simple alert alert with
an example
link. Give it a click if you
like.
A simple warning alert
with an example
link. Give it a click if you
like.
A simple info alert with
an example
link. Give it a click if you
like.
A simple light alert with
an example
link. Give it a click if you
like.
A simple dark alert with
an example
link. Give it a click if you
like.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Badge
DocumentationExample heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Primary
Secondary
Success
alert
Warning
Info
Light
Dark
Breadcrumb
DocumentationButtons
DocumentationButton group
DocumentationCard
DocumentationCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Featured
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
- An item
- A second item
- A third item
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Carousel
DocumentationDropdowns
DocumentationList group
Documentation- A disabled item
- A second item
- A third item
- A fourth item
- And a fifth one
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
Modal
DocumentationNavs
DocumentationPagination
DocumentationPopovers
DocumentationProgress
DocumentationScrollspy
Documentation@fat
Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
@mdo
Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.
one
Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
two
Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.
three
Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.
And some more placeholder content, for good measure.
Spinners
DocumentationLoading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Toasts
Documentation Bootstrap
11 mins
ago
Hello, world!
This is a toast message.
Tooltips
Documentation<section id="components">
<article class="m-y_3"
id="accordion">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Accordion</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/accordion/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="accordion"
id="accordionExample">
<div class="accordion-item">
<h4 class="accordion-header"
id="headingOne"><button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">Accordion
Item #1</button></h4>
<div id="collapseOne"
class="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first
item's accordion
body.</strong> It is
hidden by default, until the
collapse plugin adds the
appropriate classes that we
use to style each element.
These classes control the
overall appearance, as well
as the showing and hiding
via CSS transitions. You can
modify any of this with
custom CSS or overriding our
default variables. It's also
worth noting that just about
any HTML can go within the
<code>.accordion-body</code>,
though the transition does
limit overflow.</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header"
id="headingTwo"><button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo">Accordion
Item #2</button></h4>
<div id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second
item's accordion
body.</strong> It is
hidden by default, until the
collapse plugin adds the
appropriate classes that we
use to style each element.
These classes control the
overall appearance, as well
as the showing and hiding
via CSS transitions. You can
modify any of this with
custom CSS or overriding our
default variables. It's also
worth noting that just about
any HTML can go within the
<code>.accordion-body</code>,
though the transition does
limit overflow.</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header"
id="headingThree"><button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree">Accordion
Item #3</button></h4>
<div id="collapseThree"
class="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third
item's accordion
body.</strong> It is
hidden by default, until the
collapse plugin adds the
appropriate classes that we
use to style each element.
These classes control the
overall appearance, as well
as the showing and hiding
via CSS transitions. You can
modify any of this with
custom CSS or overriding our
default variables. It's also
worth noting that just about
any HTML can go within the
<code>.accordion-body</code>,
though the transition does
limit overflow.</div>
</div>
</div>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="alerts">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Alerts</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/alerts/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="alert alert-primary alert-dismissible fade show"
role="alert">A simple primary alert
with <a href="#"
class="alert-link">an example
link</a>. Give it a click if you
like. <button type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible fade show"
role="alert">A simple secondary alert
with <a href="#"
class="alert-link">an example
link</a>. Give it a click if you
like. <button type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible fade show"
role="alert">A simple success alert
with <a href="#"
class="alert-link">an example
link</a>. Give it a click if you
like. <button type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
<div class="alert alert-alert alert-dismissible fade show"
role="alert">A simple alert alert with
<a href="#"
class="alert-link">an example
link</a>. Give it a click if you
like. <button type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible fade show"
role="alert">A simple warning alert
with <a href="#"
class="alert-link">an example
link</a>. Give it a click if you
like. <button type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible fade show"
role="alert">A simple info alert with
<a href="#"
class="alert-link">an example
link</a>. Give it a click if you
like. <button type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
<div class="alert alert-light alert-dismissible fade show"
role="alert">A simple light alert with
<a href="#"
class="alert-link">an example
link</a>. Give it a click if you
like. <button type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-dismissible fade show"
role="alert">A simple dark alert with
<a href="#"
class="alert-link">an example
link</a>. Give it a click if you
like. <button type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
</div>
<div class="bd-example">
<div class="alert alert-success"
role="alert">
<h4 class="alert-heading">Well done!
</h4>
<p>Aww yeah, you successfully read this
important alert message. This
example text is going to run a bit
longer so that you can see how
spacing within an alert works with
this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be
sure to use margin utilities to keep
things nice and tidy.</p>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="badge">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Badge</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/badge/">Documentation</a>
</div>
<div>
<div class="bd-example">
<p class="h1">Example heading <span
class="badge bg_primary">New</span>
</p>
<p class="h2">Example heading <span
class="badge bg_secondary">New</span>
</p>
<p class="h3">Example heading <span
class="badge bg_success">New</span>
</p>
<p class="h4">Example heading <span
class="badge bg_alert">New</span>
</p>
<p class="h5">Example heading <span
class="badge bg_warning c_dark">New</span>
</p>
<p class="h6">Example heading <span
class="badge bg_info c_dark">New</span>
</p>
<p class="h6">Example heading <span
class="badge bg_light c_dark">New</span>
</p>
<p class="h6">Example heading <span
class="badge bg_dark">New</span>
</p>
</div>
<div class="bd-example"><span
class="badge rounded-pill bg_primary">Primary</span>
<span
class="badge rounded-pill bg_secondary">Secondary</span>
<span
class="badge rounded-pill bg_success">Success</span>
<span
class="badge rounded-pill bg_alert">alert</span>
<span
class="badge rounded-pill bg_warning c_dark">Warning</span>
<span
class="badge rounded-pill bg_info c_dark">Info</span>
<span
class="badge rounded-pill bg_light c_dark">Light</span>
<span
class="badge rounded-pill bg_dark">Dark</span>
</div>
</div>
</article>
<article class="m-y_3"
id="breadcrumb">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Breadcrumb</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/breadcrumb/">Documentation</a>
</div>
<div>
<div class="bd-example">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Home</a></li>
<li class="breadcrumb-item"><a
href="#">Library</a></li>
<li class="breadcrumb-item active"
aria-current="page">Data</li>
</ol>
</nav>
</div>
</div>
</article>
<article class="m-y_3"
id="buttons">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Buttons</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/buttons/">Documentation</a>
</div>
<div>
<div class="bd-example"><button type="button"
class="btn btn-primary">Primary</button>
<button type="button"
class="btn btn-secondary">Secondary</button>
<button type="button"
class="btn btn-success">Success</button>
<button type="button"
class="btn btn-alert">alert</button>
<button type="button"
class="btn btn-warning">Warning</button>
<button type="button"
class="btn btn-info">Info</button>
<button type="button"
class="btn btn-link">Link</button>
</div>
<div class="bd-example"><button type="button"
class="btn btn-outline-primary">Primary</button>
<button type="button"
class="btn btn-outline-secondary">Secondary</button>
<button type="button"
class="btn btn-outline-success">Success</button>
<button type="button"
class="btn btn-outline-alert">alert</button>
<button type="button"
class="btn btn-outline-warning">Warning</button>
<button type="button"
class="btn btn-outline-info">Info</button>
</div>
<div class="bd-example"><button type="button"
class="btn btn-primary btn-sm">Small
button</button> <button type="button"
class="btn btn-primary">Standard
button</button> <button type="button"
class="btn btn-primary btn-lg">Large
button</button></div>
</div>
</article>
<article class="m-y_3"
id="button-group">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Button group</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/button-group/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="btn-toolbar"
role="toolbar"
aria-label="Toolbar with button groups">
<div class="btn-group m_3"
role="group"
aria-label="First group"><button
type="button"
class="btn btn-secondary">1</button>
<button type="button"
class="btn btn-secondary">2</button>
<button type="button"
class="btn btn-secondary">3</button>
<button type="button"
class="btn btn-secondary">4</button>
</div>
<div class="btn-group m_3"
role="group"
aria-label="Second group"><button
type="button"
class="btn btn-secondary">5</button>
<button type="button"
class="btn btn-secondary">6</button>
<button type="button"
class="btn btn-secondary">7</button>
</div>
<div class="btn-group"
role="group"
aria-label="Third group"><button
type="button"
class="btn btn-secondary">8</button>
</div>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="card">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Card</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/card/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div
class="row row_cols-1 row_cols-md-2 g-4">
<div class="col">
<div class="card"><svg
class="bd-placeholder-img card-img-top"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false">
<title>Placeholder</title>
<rect width="100%"
height="100%"
fill="#868e96"></rect>
<text x="50%"
y="50%"
fill="#dee2e6"
dy=".3em">Image
cap</text>
</svg>
<div class="card-body">
<h5 class="card-title">Card
title</h5>
<p class="card-text">Some
quick example text to
build on the card title
and make up the bulk of
the card's content.</p>
<a href="#"
class="btn btn-primary">Go
somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
Featured</div>
<div class="card-body">
<h5 class="card-title">Card
title</h5>
<p class="card-text">Some
quick example text to
build on the card title
and make up the bulk of
the card's content.</p>
<a href="#"
class="btn btn-primary">Go
somewhere</a>
</div>
<div
class="card-footer c_muted">
2 days ago</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card
title</h5>
<p class="card-text">Some
quick example text to
build on the card title
and make up the bulk of
the card's content.</p>
</div>
<ul
class="list-group list-group-flush">
<li class="list-group-item">
An item</li>
<li class="list-group-item">
A second item</li>
<li class="list-group-item">
A third item</li>
</ul>
<div class="card-body"><a
href="#"
class="card-link">Card
link</a> <a href="#"
class="card-link">Another
link</a></div>
</div>
</div>
<div class="col">
<div class="card">
<div class="row g-0">
<div class="col-md-4"><svg
class="bd-placeholder-img"
width="100%"
height="250"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image"
preserveAspectRatio="xMidYMid slice"
focusable="false">
<title>Placeholder
</title>
<rect width="100%"
height="100%"
fill="#868e96">
</rect><text x="50%"
y="50%"
fill="#dee2e6"
dy=".3em">Image</text>
</svg></div>
<div class="col-md-8">
<div class="card-body">
<h5
class="card-title">
Card title</h5>
<p
class="card-text">
This is a wider
card with
supporting text
below as a
natural lead-in
to additional
content. This
content is a
little bit
longer.</p>
<p
class="card-text">
<small
class="c_muted">Last
updated 3
mins
ago</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="carousel">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Carousel</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/carousel/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div id="carouselExampleCaptions"
class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-indicators"><button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"></button>
<button type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w_100"
width="800"
height="400"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: First slide"
preserveAspectRatio="xMidYMid slice"
focusable="false">
<title>Placeholder</title>
<rect width="100%"
height="100%"
fill="#777"></rect>
<text x="50%"
y="50%"
fill="#555"
dy=".3em">First
slide</text>
</svg>
<div
class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative
placeholder content for
the first slide.</p>
</div>
</div>
<div class="carousel-item"><svg
class="bd-placeholder-img bd-placeholder-img-lg d-block w_100"
width="800"
height="400"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Second slide"
preserveAspectRatio="xMidYMid slice"
focusable="false">
<title>Placeholder</title>
<rect width="100%"
height="100%"
fill="#666"></rect>
<text x="50%"
y="50%"
fill="#444"
dy=".3em">Second
slide</text>
</svg>
<div
class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative
placeholder content for
the second slide.</p>
</div>
</div>
<div class="carousel-item"><svg
class="bd-placeholder-img bd-placeholder-img-lg d-block w_100"
width="800"
height="400"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Third slide"
preserveAspectRatio="xMidYMid slice"
focusable="false">
<title>Placeholder</title>
<rect width="100%"
height="100%"
fill="#555"></rect>
<text x="50%"
y="50%"
fill="#333"
dy=".3em">Third
slide</text>
</svg>
<div
class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative
placeholder content for
the third slide.</p>
</div>
</div>
</div><button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"><span
class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span
class="visually-hidden">Previous</span></button>
<button class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"><span
class="carousel-control-next-icon"
aria-hidden="true"></span>
<span
class="visually-hidden">Next</span></button>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="dropdowns">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Dropdowns</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/dropdowns/">Documentation</a>
</div>
<div>
<div class="bd-example flex">
<div
class="btn-group w_100 flex_wrap">
<div class="dropdown"><button
class="btn btn-secondary btn-sm dropdown-toggle"
type="button"
id="dropdownMenuButtonSM"
data-bs-toggle="dropdown"
aria-expanded="false">Dropdown
button</button>
<ul class="dropdown-menu"
aria-labelledby="dropdownMenuButtonSM">
<li>
<h6 class="dropdown-header">
Dropdown header</h6>
</li>
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another
action</a></li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
<li>
<hr
class="dropdown-divider">
</li>
<li><a class="dropdown-item"
href="#">Separated
link</a></li>
</ul>
</div>
<div class="dropdown"><button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-bs-toggle="dropdown"
aria-expanded="false">Dropdown
button</button>
<ul class="dropdown-menu"
aria-labelledby="dropdownMenuButton">
<li>
<h6 class="dropdown-header">
Dropdown header</h6>
</li>
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another
action</a></li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
<li>
<hr
class="dropdown-divider">
</li>
<li><a class="dropdown-item"
href="#">Separated
link</a></li>
</ul>
</div>
<div class="dropdown"><button
class="btn btn-secondary btn-lg dropdown-toggle"
type="button"
id="dropdownMenuButtonLG"
data-bs-toggle="dropdown"
aria-expanded="false">Dropdown
button</button>
<ul class="dropdown-menu"
aria-labelledby="dropdownMenuButtonLG">
<li>
<h6 class="dropdown-header">
Dropdown header</h6>
</li>
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another
action</a></li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
<li>
<hr
class="dropdown-divider">
</li>
<li><a class="dropdown-item"
href="#">Separated
link</a></li>
</ul>
</div>
</div>
</div>
<div class="bd-example">
<div class="btn-group"><button type="button"
class="btn btn-primary">Primary</button>
<button type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"><span
class="visually-hidden">Toggle
Dropdown</span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another action</a>
</li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group"><button type="button"
class="btn btn-secondary">Secondary</button>
<button type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"><span
class="visually-hidden">Toggle
Dropdown</span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another action</a>
</li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group"><button type="button"
class="btn btn-success">Success</button>
<button type="button"
class="btn btn-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"><span
class="visually-hidden">Toggle
Dropdown</span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another action</a>
</li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group"><button type="button"
class="btn btn-info">Info</button>
<button type="button"
class="btn btn-info dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"><span
class="visually-hidden">Toggle
Dropdown</span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another action</a>
</li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group"><button type="button"
class="btn btn-warning">Warning</button>
<button type="button"
class="btn btn-warning dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"><span
class="visually-hidden">Toggle
Dropdown</span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another action</a>
</li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group"><button type="button"
class="btn btn-alert">alert</button>
<button type="button"
class="btn btn-alert dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"><span
class="visually-hidden">Toggle
Dropdown</span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another action</a>
</li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
</ul>
</div><!-- /btn-group -->
</div>
<div class="bd-example">
<div
class="btn-group w_100 align-items-center justify-content-between flex-wrap">
<div class="dropend"><button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropendMenuButton"
data-bs-toggle="dropdown"
aria-expanded="false">Dropend
button</button>
<ul class="dropdown-menu"
aria-labelledby="dropendMenuButton">
<li>
<h6 class="dropdown-header">
Dropdown header</h6>
</li>
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another
action</a></li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
<li>
<hr
class="dropdown-divider">
</li>
<li><a class="dropdown-item"
href="#">Separated
link</a></li>
</ul>
</div>
<div class="dropup"><button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropupMenuButton"
data-bs-toggle="dropdown"
aria-expanded="false">Dropup
button</button>
<ul class="dropdown-menu"
aria-labelledby="dropupMenuButton">
<li>
<h6 class="dropdown-header">
Dropdown header</h6>
</li>
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another
action</a></li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
<li>
<hr
class="dropdown-divider">
</li>
<li><a class="dropdown-item"
href="#">Separated
link</a></li>
</ul>
</div>
<div class="dropstart"><button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropstartMenuButton"
data-bs-toggle="dropdown"
aria-expanded="false">Dropstart
button</button>
<ul class="dropdown-menu"
aria-labelledby="dropstartMenuButton">
<li>
<h6 class="dropdown-header">
Dropdown header</h6>
</li>
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another
action</a></li>
<li><a class="dropdown-item"
href="#">Something else
here</a></li>
<li>
<hr
class="dropdown-divider">
</li>
<li><a class="dropdown-item"
href="#">Separated
link</a></li>
</ul>
</div>
</div>
</div>
<div class="bd-example">
<div class="btn-group">
<div class="dropdown"><button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownRightMenuButton"
data-bs-toggle="dropdown"
aria-expanded="false">End-aligned
menu</button>
<ul class="dropdown-menu dropdown-menu-end"
aria-labelledby="dropdownRightMenuButton">
<li>
<h6 class="dropdown-header">
Dropdown header</h6>
</li>
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item"
href="#">Another
action</a></li>
<li>
<hr
class="dropdown-divider">
</li>
<li><a class="dropdown-item"
href="#">Separated
link</a></li>
</ul>
</div>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="list-group">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>List group</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/list-group/">Documentation</a>
</div>
<div>
<div class="bd-example">
<ul class="list-group">
<li class="list-group-item disabled"
aria-disabled="true">A disabled item
</li>
<li class="list-group-item">A second
item</li>
<li class="list-group-item">A third item
</li>
<li class="list-group-item">A fourth
item</li>
<li class="list-group-item">And a fifth
one</li>
</ul>
</div>
<div class="bd-example">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second
item</li>
<li class="list-group-item">A third item
</li>
<li class="list-group-item">A fourth
item</li>
<li class="list-group-item">And a fifth
one</li>
</ul>
</div>
<div class="bd-example">
<div class="list-group"><a href="#"
class="list-group-item list-group-item-action">A
simple default list group item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-primary">A
simple primary list group item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-secondary">A
simple secondary list group item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-success">A
simple success list group item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-alert">A
simple alert list group item</a> <a
href="#"
class="list-group-item list-group-item-action list-group-item-warning">A
simple warning list group item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-info">A
simple info list group item</a>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="modal">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Modal</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/modal/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div
class="d-flex justify-content-between flex-wrap">
<button type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalDefault">Launch
demo modal</button> <button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#staticBackdropLive">Launch
static backdrop modal</button>
<button type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalCenteredScrollable">Vertically
centered scrollable modal</button>
<button type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalFullscreen">Full
screen</button></div>
</div>
</div>
</article>
<article class="m-y_3"
id="navs">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Navs</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/navs-tabs/">Documentation</a>
</div>
<div>
<div class="bd-example">
<nav class="nav"><a class="nav-link active"
aria-current="page"
href="#">Active</a> <a
class="nav-link"
href="#">Link</a> <a class="nav-link"
href="#">Link</a> <a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true">Disabled</a>
</nav>
</div>
<div class="bd-example">
<nav>
<div class="nav nav-tabs m-b_3"
id="nav-tab"
role="tablist"><button
class="nav-link active"
id="nav-home-tab"
data-bs-toggle="tab"
data-bs-target="#nav-home"
type="button"
role="tab"
aria-controls="nav-home"
aria-selected="true">Home</button>
<button class="nav-link"
id="nav-profile-tab"
data-bs-toggle="tab"
data-bs-target="#nav-profile"
type="button"
role="tab"
aria-controls="nav-profile"
aria-selected="false">Profile</button>
<button class="nav-link"
id="nav-contact-tab"
data-bs-toggle="tab"
data-bs-target="#nav-contact"
type="button"
role="tab"
aria-controls="nav-contact"
aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content"
id="nav-tabContent">
<div class="tab-pane fade show active"
id="nav-home"
role="tabpanel"
aria-labelledby="nav-home-tab">
<p>Placeholder content for the tab
panel. This one relates to the
home tab. Takes you miles high,
so high, 'cause she’s got that
one international smile. There's
a stranger in my bed, there's a
pounding in my head. Oh, no. In
another life I would make you
stay. ‘Cause I, I’m capable of
anything. Suiting up for my
crowning battle. Used to steal
your parents' liquor and climb
to the roof. Tone, tan fit and
ready, turn it up cause its
gettin' heavy. Her love is like
a drug. I guess that I forgot I
had a choice.</p>
</div>
<div class="tab-pane fade"
id="nav-profile"
role="tabpanel"
aria-labelledby="nav-profile-tab">
<p>Placeholder content for the tab
panel. This one relates to the
profile tab. You got the finest
architecture. Passport stamps,
she's cosmopolitan. Fine, fresh,
fierce, we got it on lock. Never
planned that one day I'd be
losing you. She eats your heart
out. Your kiss is cosmic, every
move is magic. I mean the ones,
I mean like she's the one.
Greetings loved ones let's take
a journey. Just own the night
like the 4th of July! But you'd
rather get wasted.</p>
</div>
<div class="tab-pane fade"
id="nav-contact"
role="tabpanel"
aria-labelledby="nav-contact-tab">
<p>Placeholder content for the tab
panel. This one relates to the
contact tab. Her love is like a
drug. All my girls vintage
Chanel baby. Got a motel and
built a fort out of sheets.
'Cause she's the muse and the
artist. (This is how we do) So
you wanna play with magic. So
just be sure before you give it
all to me. I'm walking, I'm
walking on air (tonight). Skip
the talk, heard it all, time to
walk the walk. Catch her if you
can. Stinging like a bee I
earned my stripes.</p>
</div>
</div>
</div>
<div class="bd-example">
<ul class="nav nav-pills">
<li class="nav-item"><a
class="nav-link active"
aria-current="page"
href="#">Active</a></li>
<li class="nav-item"><a class="nav-link"
href="#">Link</a></li>
<li class="nav-item"><a class="nav-link"
href="#">Link</a></li>
<li class="nav-item"><a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</article>
<article class="m-y_3"
id="pagination">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Pagination</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/pagination/">Documentation</a>
</div>
<div>
<div class="bd-example">
<nav aria-label="Pagination example">
<ul class="pagination pagination-sm">
<li class="page-item"><a
class="page-link"
href="#">1</a></li>
<li class="page-item active"
aria-current="page"><a
class="page-link"
href="#">2</a></li>
<li class="page-item"><a
class="page-link"
href="#">3</a></li>
</ul>
</nav>
</div>
<div class="bd-example">
<nav
aria-label="Standard pagination example">
<ul class="pagination">
<li class="page-item"><a
class="page-link"
href="#"
aria-label="Previous"><span
aria-hidden="true">«</span></a>
</li>
<li class="page-item"><a
class="page-link"
href="#">1</a></li>
<li class="page-item"><a
class="page-link"
href="#">2</a></li>
<li class="page-item"><a
class="page-link"
href="#">3</a></li>
<li class="page-item"><a
class="page-link"
href="#"
aria-label="Next"><span
aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
</div>
<div class="bd-example">
<nav
aria-label="Another pagination example">
<ul
class="pagination pagination-lg flex-wrap">
<li class="page-item disabled"><a
class="page-link"
href="#"
tabindex="-1"
aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a
class="page-link"
href="#">1</a></li>
<li class="page-item active"
aria-current="page"><a
class="page-link"
href="#">2</a></li>
<li class="page-item"><a
class="page-link"
href="#">3</a></li>
<li class="page-item"><a
class="page-link"
href="#">Next</a></li>
</ul>
</nav>
</div>
</div>
</article>
<article class="m-y_3"
id="popovers">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Popovers</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/popovers/">Documentation</a>
</div>
<div>
<div class="bd-example"><button type="button"
class="btn btn-lg btn-alert"
data-bs-toggle="popover"
title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?">Click
to toggle popover</button></div>
<div class="bd-example"><button type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
on top</button> <button type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="right"
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
on end</button> <button type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="bottom"
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
on bottom</button> <button type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="left"
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
on start</button></div>
</div>
</article>
<article class="m-y_3"
id="progress">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Progress</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/progress/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="progress m-b_3">
<div class="progress-bar"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100">0%</div>
</div>
<div class="progress m-b_3">
<div class="progress-bar bg_success w_25"
role="progressbar"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100">25%</div>
</div>
<div class="progress m-b_3">
<div class="progress-bar bg_info c_dark w_50"
role="progressbar"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100">50%</div>
</div>
<div class="progress m-b_3">
<div class="progress-bar bg_warning c_dark w_75"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100">75%</div>
</div>
<div class="progress">
<div class="progress-bar bg_alert w_100"
role="progressbar"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100">100%</div>
</div>
</div>
<div class="bd-example">
<div class="progress">
<div class="progress-bar"
role="progressbar"
style="width:15%"
aria-valuenow="15"
aria-valuemin="0"
aria-valuemax="100"></div>
<div class="progress-bar progress-bar-striped progress-bar-animated bg_success"
role="progressbar"
style="width:40%"
aria-valuenow="40"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="scrollspy">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Scrollspy</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/scrollspy/">Documentation</a>
</div>
<div>
<div class="bd-example">
<nav id="navbar-example2"
class="navbar navbar-light bg_light px-3">
<a class="navbar-brand"
href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item"><a
class="nav-link"
href="#fat">@fat</a></li>
<li class="nav-item"><a
class="nav-link"
href="#mdo">@mdo</a></li>
<li class="nav-item dropdown"><a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="#one">one</a>
</li>
<li><a class="dropdown-item"
href="#two">two</a>
</li>
<li>
<hr
class="dropdown-divider">
</li>
<li><a class="dropdown-item"
href="#three">three</a>
</li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll"
data-bs-target="#navbar-example2"
data-bs-offset="0"
class="scrollspy-example"
tabindex="0">
<h4 id="fat">@fat</h4>
<p>Placeholder content for the scrollspy
example. You got the finest
architecture. Passport stamps, she's
cosmopolitan. Fine, fresh, fierce,
we got it on lock. Never planned
that one day I'd be losing you. She
eats your heart out. Your kiss is
cosmic, every move is magic. I mean
the ones, I mean like she's the one.
Greetings loved ones let's take a
journey. Just own the night like the
4th of July! But you'd rather get
wasted.</p>
<h4 id="mdo">@mdo</h4>
<p>Placeholder content for the scrollspy
example. 'Cause she's the muse and
the artist. (This is how we do) So
you wanna play with magic. So just
be sure before you give it all to
me. I'm walking, I'm walking on air
(tonight). Skip the talk, heard it
all, time to walk the walk.</p>
<h4 id="one">one</h4>
<p>Placeholder content for the scrollspy
example. Takes you miles high, so
high, 'cause she’s got that one
international smile. There's a
stranger in my bed, there's a
pounding in my head. Oh, no. In
another life I would make you stay.
‘Cause I, I’m capable of anything.
Suiting up for my crowning battle.
Used to steal your parents' liquor
and climb to the roof. Tone, tan fit
and ready, turn it up cause its
gettin' heavy. Her love is like a
drug. I guess that I forgot I had a
choice.</p>
<h4 id="two">two</h4>
<p>Placeholder content for the scrollspy
example. It's time to bring out the
big balloons. I'm walking, I'm
walking on air (tonight). Yeah, we
maxed our credit cards and got
kicked out of the bar. Yo, shout out
to all you kids, buying bottle
service, with your rent money. I'm
ma get your heart racing in my
skin-tight jeans. If you get the
chance you better keep her. Yo,
shout out to all you kids, buying
bottle service, with your rent
money.</p>
<h4 id="three">three</h4>
<p>Placeholder content for the scrollspy
example. If you wanna dance, if you
want it all, you know that I'm the
girl that you should call. Walk
through the storm I would. So let me
get you in your birthday suit. The
one that got away. Last Friday
night, yeah I think we broke the
law, always say we're gonna stop.
'Cause she's a little bit of Yoko,
And she's a little bit of 'Oh no'. I
want the jaw droppin', eye poppin',
head turnin', body shockin'. Yeah,
we maxed our credit cards and got
kicked out of the bar.</p>
<p>And some more placeholder content,
for good measure.</p>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="spinners">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Spinners</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/spinners/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="spinner-border c_primary"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border c_secondary"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border c_success"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border c_alert"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border c_warning"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border c_info"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border c_light"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border c_dark"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
</div>
<div class="bd-example">
<div class="spinner-grow c_primary"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow c_secondary"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow c_success"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow c_alert"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow c_warning"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow c_info"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow c_light"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow c_dark"
role="status"><span
class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="toasts">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Toasts</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/toasts/">Documentation</a>
</div>
<div>
<div
class="bd-example bg_dark p-5 align-items-center">
<div class="toast"
role="alert"
aria-live="assertive"
aria-atomic="true">
<div class="toast-header"><svg
class="bd-placeholder-img rounded m_3"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
preserveAspectRatio="xMidYMid slice"
focusable="false">
<rect width="100%"
height="100%"
fill="#007aff"></rect>
</svg> <strong
class="me-auto">Bootstrap</strong>
<small class="c_muted">11 mins
ago</small> <button
type="button"
class="btn-close"
data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world!
This is a toast message.</div>
</div>
</div>
</div>
</article>
<article class="mt-3 mb-5 pb-5"
id="tooltips">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
<h3>Tooltips</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/components/tooltips/">Documentation</a>
</div>
<div>
<div class="bd-example tooltip-demo"><button
type="button"
class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Tooltip on top">Tooltip on
top</button> <button type="button"
class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Tooltip on end">Tooltip on
end</button> <button type="button"
class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="Tooltip on bottom">Tooltip on
bottom</button> <button type="button"
class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="left"
title="Tooltip on start">Tooltip on
start</button> <button type="button"
class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-html="true"
title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip
with HTML</button></div>
</div>
</article>
</section>