This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/
Source: dist/css/virtual_boot.css, line 19433
Bootstrap 5 is a complete UI framework with many features. Please familiarize yourself with bootstrap framework as you build. It will give you access to grid, forms and other UI items. https://getbootstrap.com/
Source: dist/css/virtual_boot.css, line 6896
Basic Buttons
Medium buttons (default)
Primary Class Button (default)
Second Class Button
Button for call out actions
Success State.
Alert State.
Warning State
All button states can become hollow
Give the button softer corners
Give a button a shadow
Small buttons
Large buttons
Disabled buttons
<a class="btn btn-primary [modifier]" href="#">[modifier] button</a>
<button class="btn btn-primary [modifier]" href="#">[modifier] button</button>Source: dist/css/virtual_boot.css, line 21711
A slide-show component for cycling through groups of images and text. .no-controls Will remove left and right arrow .text-indicators Converts the circle indicators to text tabs that lock to the right side of the images. .chevron-on Adds a light orange chevron on the '.active' indicator to increase its impact.
NEW | Hear from an expert panel and complete four patient cases to test your knowledge on our Syncope Program! Find out more!
<div
id="carouselExampleFade"
class="carousel carousel-alt slide no-controls text-indicators chevron-on"
>
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="wrap" >
quaerat odit assumenda
</li>
<li data-target="#carouselExampleFade" data-slide-to="1" class=" wrap">
delectus sunt optio
</li>
<li data-target="#carouselExampleFade" data-slide-to="2" class=" wrap">
deserunt quia quasi
</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<a><img class="block w_100" src="http://lorempixel.com/630/420/animals" alt="..."/></a>
<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
<span class="title font_display block m-b_2 font_4:md m-b_3:md">Cardiac Syncope Program Launches!</span>
<p><strong>NEW</strong> | Hear from an expert panel and complete four patient cases to test your knowledge on our Syncope Program! <a href="http://edu.acc.org/diweb/catalog/item/eid/SYNCOPE2019" title="" class="" target="_blank"><strong>Find out more!</strong></a></p>
</div>
</div>
<div class="carousel-item">
<a><img class="block w_100" src="http://lorempixel.com/630/420/nature" alt="..."/></a>
<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
<span class="title font_display block m-b_2 font_4:md m-b_3:md">sint explicabo sequi</span> Earum nihil omnis.
</div>
</div>
<div class="carousel-item">
<a><img class="block w_100" src="http://lorempixel.com/630/420/food" alt="..."/></a>
<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
<span class="title font_display block m-b_2 font_4:md m-b_3:md">sint explicabo sequi</span> Earum nihil omnis.
</div>
</div>
</div>
<!-- Controls -->
<a
class="left carousel-control-prev"
href="#carouselExampleFade"
role="button"
data-slide="prev"
>
<i class="fas fa-chevron-left"></i>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control-next"
href="#carouselExampleFade"
role="button"
data-slide="next"
>
<i class="fas fa-chevron-right"></i>
<span class="sr-only">Next</span>
</a>
</div>Source: dist/css/virtual_boot.css, line 19443
The collection of typography when using the bootstrap foundation of arches.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a lead paragraph. It stands out from regular paragraphs.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
A well-known quote, contained in a blockquote element.
<article class="m-y_3" id="typography"><div><div class="bd-example"><p class="display-1">Display 1</p><p class="display-2">Display 2</p><p class="display-3">Display 3</p><p class="display-4">Display 4</p><p class="display-5">Display 5</p><p class="display-6">Display 6</p></div><div class="bd-example"><p class="h1">Heading 1</p><p class="h2">Heading 2</p><p class="h3">Heading 3</p><p class="h4">Heading 4</p><p class="h5">Heading 5</p><p class="h6">Heading 6</p></div><div class="bd-example"><p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p></div><div class="bd-example"><p>You can use the mark tag to <mark>highlight</mark> text.</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><s>This line of text is meant to be treated as no longer accurate.</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>This line of text will render as underlined.</u></p><p><small>This line of text is meant to be treated as fine print.</small></p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p></div><div class="bd-example"><blockquote class="blockquote"><p>A well-known quote, contained in a blockquote element.</p><footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote></div><div class="bd-example"><ul class="list-unstyled"><li>This is a list.</li><li>It appears completely unstyled.</li><li>Structurally, it's still a list.</li><li>However, this style only applies to immediate child elements.</li><li>Nested lists:<ul><li>are unaffected by this style</li><li>will still show a bullet</li><li>and have appropriate left margin</li></ul></li><li>This may still come in handy in some situations.</li></ul></div><div class="bd-example"><ul class="list-inline"><li class="list-inline-item">This is a list item.</li><li class="list-inline-item">And another one.</li><li class="list-inline-item">But they're displayed inline.</li></ul></div></div></article><article class="m-y_3" id="images"><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 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2"><h3>Images</h3><a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/content/images/">Documentation</a></div><div><div class="bd-example"><svg class="bd-placeholder-img bd-placeholder-img-lg img-fluid" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive 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">Responsive image</text></svg></div><div class="bd-example"><svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg></div></div></article>Source: dist/css/virtual_boot.css, line 19456
The collection of modifications you can do with tables out of the box from Bootstrap Arches.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| alert | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<article class="m-y_3" id="tables"><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 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2"><h3>Tables</h3><a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/content/tables/">Documentation</a></div><div><div class="bd-example"><table class="table table-striped"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="bd-example"><table class="table table-dark table-borderless"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="bd-example"><table class="table table-hover"><thead><tr><th scope="col">Class</th><th scope="col">Heading</th><th scope="col">Heading</th></tr></thead><tbody><tr><th scope="row">Default</th><td>Cell</td><td>Cell</td></tr><tr class="table-primary"><th scope="row">Primary</th><td>Cell</td><td>Cell</td></tr><tr class="table-secondary"><th scope="row">Secondary</th><td>Cell</td><td>Cell</td></tr><tr class="table-success"><th scope="row">Success</th><td>Cell</td><td>Cell</td></tr><tr class="table-alert"><th scope="row">alert</th><td>Cell</td><td>Cell</td></tr><tr class="table-warning"><th scope="row">Warning</th><td>Cell</td><td>Cell</td></tr><tr class="table-info"><th scope="row">Info</th><td>Cell</td><td>Cell</td></tr><tr class="table-light"><th scope="row">Light</th><td>Cell</td><td>Cell</td></tr><tr class="table-dark"><th scope="row">Dark</th><td>Cell</td><td>Cell</td></tr></tbody></table></div><div class="bd-example"><table class="table table-sm table-bordered"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div></div></article><article class="m-y_3" id="figures"><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 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2"><h3>Figures</h3><a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/content/figures/">Documentation</a></div><div><div class="bd-example"><figure class="figure"><svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" 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">400x300</text></svg><figcaption class="figure-caption">A caption for the above image.</figcaption></figure></div></div></article>Source: dist/css/virtual_boot.css, line 19471
Out of the box bootstrap forms.
<article class="m-y_3"
id="overview">
<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 mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Overview</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/overview/">Documentation</a>
</div>
<div>
<div class="bd-example">
<form>
<div class="m-b_3"><label
for="exampleInputEmail1"
class="form-label">Email
address</label> <input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp">
<div id="emailHelp"
class="form-text">We'll never share
your email with anyone else.</div>
</div>
<div class="m-b_3"><label
for="exampleInputPassword1"
class="form-label">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"></div>
<div class="m-b_3 form-check"><input
type="checkbox"
class="form-check-input"
id="exampleCheck1"> <label
class="form-check-label"
for="exampleCheck1">Check me
out</label></div>
<fieldset class="m-b_3">
<legend>Radios buttons</legend>
<div class="form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="exampleRadio1"> <label
class="form-check-label"
for="exampleRadio1">Default
radio</label></div>
<div class="m-b_3 form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="exampleRadio2"> <label
class="form-check-label"
for="exampleRadio2">Another
radio</label></div>
</fieldset>
<div class="m-b_3"><label class="form-label"
for="customFile">Upload</label>
<input type="file"
class="form-control"
id="customFile"></div>
<div class="m-b_3 form-check form-switch">
<input class="form-check-input"
type="checkbox"
id="flexSwitchCheckChecked"
checked> <label
class="form-check-label"
for="flexSwitchCheckChecked">Checked
switch checkbox input</label></div>
<div class="m-b_3"><label for="customRange3"
class="form-label">Example
range</label> <input type="range"
class="form-range"
min="0"
max="5"
step="0.5"
id="customRange3"></div><button
type="submit"
class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</article>
<article class="m-y_3"
id="disabled-forms">
<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 mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Disabled forms</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/overview/#disabled-forms">Documentation</a>
</div>
<div>
<div class="bd-example">
<form>
<fieldset disabled
aria-label="Disabled fieldset example">
<div class="m-b_3"><label
for="disabledTextInput"
class="form-label">Disabled
input</label> <input type="text"
id="disabledTextInput"
class="form-control"
placeholder="Disabled input">
</div>
<div class="m-b_3"><label
for="disabledSelect"
class="form-label">Disabled
select menu</label> <select
id="disabledSelect"
class="form-select">
<option>Disabled select</option>
</select></div>
<div class="m-b_3">
<div class="form-check"><input
class="form-check-input"
type="checkbox"
id="disabledFieldsetCheck"
disabled> <label
class="form-check-label"
for="disabledFieldsetCheck">Can't
check this</label></div>
</div>
<fieldset class="m-b_3">
<legend>Disabled radios buttons
</legend>
<div class="form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="disabledRadio1"
disabled> <label
class="form-check-label"
for="disabledRadio1">Disabled
radio</label></div>
<div class="m-b_3 form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="disabledRadio2"
disabled> <label
class="form-check-label"
for="disabledRadio2">Another
radio</label></div>
</fieldset>
<div class="m-b_3"><label
class="form-label"
for="disabledCustomFile">Upload</label>
<input type="file"
class="form-control"
id="disabledCustomFile"
disabled></div>
<div
class="m-b_3 form-check form-switch">
<input class="form-check-input"
type="checkbox"
id="disabledSwitchCheckChecked"
checked
disabled> <label
class="form-check-label"
for="disabledSwitchCheckChecked">Disabled
checked switch checkbox
input</label></div>
<div class="m-b_3"><label
for="disabledRange"
class="form-label">Disabled
range</label> <input
type="range"
class="form-range"
min="0"
max="5"
step="0.5"
id="disabledRange"></div>
<button type="submit"
class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
</div>
</article>
<article class="m-y_3"
id="sizing">
<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 mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Sizing</h3><a class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/form-control/#sizing">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="m-b_3"><input
class="form-control form-control-lg"
type="text"
placeholder=".form-control-lg"
aria-label=".form-control-lg example">
</div>
<div class="m-b_3"><select
class="form-select form-select-lg m-b_3"
aria-label=".form-select-lg example">
<option selected>Open this select menu
</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select></div>
<div class="m-b_3"><input type="file"
class="form-control form-control-lg"
aria-label="Large file input example">
</div>
</div>
<div class="bd-example">
<div class="m-b_3"><input
class="form-control form-control-sm"
type="text"
placeholder=".form-control-sm"
aria-label=".form-control-sm example">
</div>
<div class="m-b_3"><select
class="form-select form-select-sm"
aria-label=".form-select-sm example">
<option selected>Open this select menu
</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select></div>
<div class="m-b_3"><input type="file"
class="form-control form-control-sm"
aria-label="Small file input example">
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="input-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 mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Input group</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/input-group/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="input-group m-b_3"><span
class="input-group-text"
id="basic-addon1">@</span> <input
type="text"
class="form-control"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="input-group m-b_3"><input type="text"
class="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2">
<span class="input-group-text"
id="basic-addon2">@example.com</span>
</div><label for="basic-url"
class="form-label">Your vanity
URL</label>
<div class="input-group m-b_3"><span
class="input-group-text"
id="basic-addon3">https://example.com/users/</span>
<input type="text"
class="form-control"
id="basic-url"
aria-describedby="basic-addon3">
</div>
<div class="input-group m-b_3"><span
class="input-group-text">$</span>
<input type="text"
class="form-control"
aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
<div class="input-group"><span
class="input-group-text">With
textarea</span> <textarea
class="form-control"
aria-label="With textarea"></textarea>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="floating-labels">
<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 mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Floating labels</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/floating-labels/">Documentation</a>
</div>
<div>
<div class="bd-example">
<form>
<div class="form-floating m-b_3 input-group-lg"><input
type="email"
class="form-control"
id="floatingInput"
placeholder="name@example.com">
<label for="floatingInput">Email
address</label></div>
<div class="form-floating"><input
type="password"
class="form-control"
id="floatingPassword"
placeholder="Password"> <label
for="floatingPassword">Password</label>
</div>
</form>
</div>
</div>
</article>
<article class="m-y_3"
id="validation">
<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 mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Validation</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/validation/">Documentation</a>
</div>
<div>
<div class="bd-example">
<form class="row g-3">
<div class="col-md-4"><label
for="validationServer01"
class="form-label">First
name</label> <input type="text"
class="form-control is-valid"
id="validationServer01"
value="Mark"
required>
<div class="valid-feedback">Looks good!
</div>
</div>
<div class="col-md-4"><label
for="validationServer02"
class="form-label">Last
name</label> <input type="text"
class="form-control is-valid"
id="validationServer02"
value="Otto"
required>
<div class="valid-feedback">Looks good!
</div>
</div>
<div class="col-md-4"><label
for="validationServerUsername"
class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text"
id="inputGroupPrepend3">@</span>
<input type="text"
class="form-control is-invalid"
id="validationServerUsername"
aria-describedby="inputGroupPrepend3"
required>
<div class="invalid-feedback">Please
choose a username.</div>
</div>
</div>
<div class="col-md-6 input-group-lg"><label
for="validationServer03"
class="form-label">City</label>
<input type="text"
class="form-control is-invalid"
id="validationServer03"
required>
<div class="invalid-feedback">Please
provide a valid city.</div>
</div>
<div class="col-md-3"><label
for="validationServer04"
class="form-label">State</label>
<select class="form-select is-invalid"
id="validationServer04"
required>
<option selected
disabled
value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">Please
select a valid state.</div>
</div>
<div class="col-md-3"><label
for="validationServer05"
class="form-label">Zip</label>
<input type="text"
class="form-control is-invalid"
id="validationServer05"
required>
<div class="invalid-feedback">Please
provide a valid zip.</div>
</div>
<div class="col-12">
<div class="form-check"><input
class="form-check-input is-invalid"
type="checkbox"
value=""
id="invalidCheck3"
required> <label
class="form-check-label"
for="invalidCheck3">Agree to
terms and conditions</label>
<div class="invalid-feedback">You
must agree before submitting.
</div>
</div>
</div>
<div class="col-12"><button
class="btn btn-primary"
type="submit">Submit
form</button></div>
</form>
</div>
</div>
</article>Source: dist/css/virtual_boot.css, line 19905
Out of the box html components from bootstrap
.accordion-body,
though the transition does
limit overflow..accordion-body,
though the transition does
limit overflow..accordion-body,
though the transition does
limit overflow.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.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
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
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.
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.
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.
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.
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.
<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>