Contents

-grid-Δ∇

Documentation
xs
<576px		sm
≥576px		md
≥768px		lg
≥992px		xl
≥1200px		xxl
≥1400px
Container max-widthNone (auto)540px720px960px1140px1320px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
# of columns12
Gutter width1.5rem (.75rem on left and right)
Custom guttersYes
NestableYes
Column orderingYes
row
Level 1:(top)col-sm-3
row
Level 2:(col-sm-9)col-8 col-sm-6
Level 2:(col-sm-9)col-4 col-sm-6
<div class="container text-center">
<div class="row">
<div class="col-sm-3 text-dark bg-info p-2">Level 1:col-sm-3</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6 bg-success p-2">Level 2:col-8 col-sm-6</div>
<div class="col-4 col-sm-6 text-dark bg-warning p-2">Level 2:col-4 col-sm-6</div>
</div>
</div>
row justify-content-md-center
col col-lg-2
col-md-auto
col col-lg-2
row
col
col-md-auto
col col-lg-2
grid text-center
style="--bs-columns: 12; --bs-gap: 0rem;"
(g-col-4)x3
<div class="grid text-center" style="--bs-columns: 12; --bs-gap: 0rem;">
<div class="g-col-4 p-3 bg-info"><code class="d-block p-2 user-select-all text-black">grid text-center</code></div>
<div class="g-col-4 p-3 bg-warning"><code class="d-block p-2 user-select-all text-black">style="--bs-columns: 12; --bs-gap: 0rem;"</code></div>
<div class="g-col-4 p-3 bg-info">(<code class="d-inline p-2 user-select-all text-black">g-col-4</code>)x3</div>
</div>
go stacks
First item
Second item
Third item
item-01
item-02
item-03
item-04
go stacks examples 
<div class="col-12 vstack gap-3">
 <div class="bg-info p-2">First item</div>
 <div class="bg-warning p-2">Second item</div>
 <div class="bg-info p-2">Third item</div>
</div>
<div class="col-12 hstack gap-3">
 <div class="bg-info p-2">First item</div>
 <div class="bg-warning p-2">Second item</div>
 <div class="bg-info p-2">Third item</div>
</div>
<hr />
<div class="vstack gap-2 col-md-4 mx-auto">
  <button type="button" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary text-capitalize">cancel</button>
</div>
<hr />
<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here..." />
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

-text-Δ∇

Documentation

text-start

text-center

text-end

text-end

text-sm-start

text-md-start

text-lg-start

text-xl-start

text-xxl-start

text-lowercase
text-uppercase
text-capitalize

text-decoration-underline

text-decoration-line-through

text-decoration-none text-decoration-none

<div class="grid text-center" style="--bs-columns: 12; --bs-gap: 0rem;">
<p class="g-col-4 text-decoration-underline"><code class="g-col-4 d-block p-2 user-select-all h6 text-black">text-decoration-underline</code></p>
<p class="g-col-4 text-decoration-line-through"><code class="g-col-4 d-block p-2 user-select-all h6 text-black">text-decoration-line-through</code></p>
<p class="g-col-4"><a href="#text" class="text-decoration-none"><code class="g-col-4 d-block p-2 user-select-all h6">text-decoration-none</code></a>
<code class="d-block p-2 user-select-all h6">text-decoration-none</code></p>

-typography-Δ∇

Documentation

display-1

display-2

display-3

display-4

display-5

display-6

fs-1

fs-2

fs-3

fs-4

fs-5

fs-6

h1

h2

h3

h4

h5

h6

This is a lead paragraph. It stands out from regular paragraphs.

class="lead"

<mark>highlight text.</mark>

<del>deleted text.</del>

<s>longer accurate.</s>

<ins>the document.</ins>

<u>underlined.</u>

<small>fine print.</small>

<strong>bold text.</strong>

<em>italicized text.</em>

Bold text.(fw-bold)

Bolder weight text.(fw-bolder)

Semibold weight text.(fw-semibold)

Normal weight text.(fw-normal)

Light weight text.(fw-light)

Lighter weight text.(fw-lighter)

Italic text.(fst-italic)

Text with normal font style(fst-normal)

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text.</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text.</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
<hr>

A well-known quote, contained in a blockquote element.

Someone famous in Source Title 
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
<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>
  • This is a list item.
  • And another one.
  • But they're displayed inline.
<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>

fancy_heading With faded secondary text 

<h3 class="fs-1 text-uppercase">
fancy_heading
<small class="text-muted fs-6 ms-2 text-lowercase">With faded secondary text</small>
</h3>
Description lists
A description list is perfect for defining terms.
Term

Definition for the term.

And some more placeholder definition text.

Another term
This definition is short, so no extra paragraphs or anything.
text-truncate...........end
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate fs-2"><code class="d-inline p-2 user-select-all">text-truncate</code>...........end</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>

-images-Δ∇

Documentation
img-fluid
img-thumbnail
border border-primary bd-placeholder-img+img-thumbnail
PlaceholderResponsive image
figure-img img-fluid rounded
<figure class="figure m-4">
<img src="image/Contrast_Checker_AAA-pass.webp" class="figure-img img-thumbnail rounded" alt="" style="min-width:20rem;">
<figcaption class="figure-caption">figure-img img-thumbnail rounded</figcaption>
</figure>
...

A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.

As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.

And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.

A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.

As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.

And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here. 

<div class="clearfix">
<img src="image/Contrast_Checker_AAA-pass.webp" class="col-md-6 float-md-end mb-3 ms-md-3" alt="..." style="max-width:20rem;">

<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>

<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>

<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>
.................

-tables-Δ∇

Documentation
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
 
<table class="table table-striped text-dark bg-light">
<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>
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
 
<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>
ClassHeadingHeading
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
 
<table class="table table-hover text-dark bg-light">
<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-danger"><th scope="row">Danger</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>
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
 
<table class="table table-sm table-bordered border-primary text-dark bg-light">
<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>

-figures-Δ∇

Documentation
Placeholder400x300
A caption for the above image.
<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"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg>
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Forms

-overview-Δ∇

Documentation
We'll never share your email with anyone else.
Radios buttons 
<form>
<div class="mb-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="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-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="mb-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="mb-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="mb-3">
<label class="form-label" for="customFile">Upload</label>
<input type="file" class="form-control" id="customFile">
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="mb-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>

-disabled_forms-Δ∇

Documentation
Disabled radios buttons 
<form>
<fieldset disabled aria-label="Disabled fieldset example">
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-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="mb-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="mb-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="mb-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="mb-3">
<label class="form-label" for="disabledCustomFile">Upload</label>
<input type="file" class="form-control" id="disabledCustomFile" disabled>
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckChecked" checked disabled>
<label class="form-check-label" for="disabledSwitchCheckChecked">Disabled checked switch checkbox input</label>
</div>
<div class="mb-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>

-sizing-Δ∇

Documentation 
<div class="mb-3">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
</div>
<div class="mb-3">
<select class="form-select form-select-lg mb-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="mb-3">
<input type="file" class="form-control form-control-lg" aria-label="Large file input example">
</div>

<div class="mb-3">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
</div>
<div class="mb-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="mb-3">
<input type="file" class="form-control form-control-sm" aria-label="Small file input example">
</div>

-input_group-Δ∇

Documentation
@
@example.com
https://example.com/users/
$ .00
With textarea 
<div class="input-group mb-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 mb-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 mb-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 mb-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>

-floating_labels-Δ∇

Documentation 
<form>
<div class="form-floating mb-3">
<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>

-validation-Δ∇

Documentation
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<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">
<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>

Components

-accordion-Δ∇

Documentation 

<div class="accordion accordion-flush" 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">
Flush #1
</button>
</h4>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">



<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">
Flush #2
</button>
</h4>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">



<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">
Flush #3
</button>
</h4>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">



<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Always open #1
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">



<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
Always open #2
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">



<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
Always open #3
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
<div class="accordion-body">

-alerts-Δ∇

Documentation
class="alert alert-dismissible fade show bd-callout bd-callout-info text-white"( btn-close btn-close-white)
class="alert alert-dismissible fade show bd-callout bd-callout-warning text-white"( btn-close btn-close-white)
class="alert alert-dismissible fade show bd-callout bd-callout-danger text-white"( btn-close btn-close-white)

-badge-Δ∇

Documentation

badge bg-dangerNew

h1 badge bg-primaryNew

h2 badge bg-secondaryNew

h3 badge bg-successNew

h4 badge bg-dangerNew

h5 badge text-bg-warningNew

h6 badge text-bg-infoNew

h6 badge text-bg-lightNew

h6 badge bg-darkNew

badge rounded-pill bg-primary badge rounded-pill bg-secondary badge rounded-pill bg-success badge rounded-pill bg-danger badge rounded-pill text-bg-warning badge rounded-pill text-bg-info badge rounded-pill text-bg-light badge rounded-pill bg-dark

-breadcrumb-Δ∇

Documentation 
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>

<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>

<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");" 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>

-buttons-Δ∇

Documentation
btn btn-primary
btn btn-secondary
btn btn-success
btn btn-danger
btn btn-warning
btn btn-info
btn btn-light
btn btn-dark
btn btn-link
btn btn-outline-primary
btn btn-outline-secondary
btn btn-outline-success
btn btn-outline-danger
btn btn-outline-warning
btn btn-outline-info
btn btn-outline-light
btn btn-outline-dark
btn btn-primary btn-sm
btn btn-primary
btn btn-primary btn-lg
d-grid gap-2 d-md-block
d-grid gap-2 d-md-flex justify-content-md-end
Toggle link role="button" data-bs-toggle="button"
Active toggle link role="button" data-bs-toggle="button" aria-pressed="true"
Disabled toggle link aria-disabled="true" role="button" data-bs-toggle="button"

-button_group-Δ∇

Documentation 
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">« Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right »</button>
</div>

<nav class="btn-group mb-4" aria-label="Default button group">
<a href="Phoenician.html" class="btn btn-outline-dark"><bdo dir="ltr">𐤅𐤄𐤍𐤉𐤊𐤉𐤀</bdo></a>
<a href="EICAR_Test_File.html" class="btn btn-outline-dark">EICAR</a>
<a href="list.html" class="btn btn-outline-dark">LIST</a>
<a href="link.html" class="btn btn-outline-dark">LINK</a>
</nav>

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">« Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right »</button>

-card-Δ∇

Documentation

Card title

<div class="card border border-primary">
<img src="image/Contrast_Checker_AAA-pass.webp" class="img-fluid" alt="" style="min-width:20rem;">
<div class="card-body bg-dark text-light">
<p class="card-title d-inline-flex h5 p-2 text-white">Card title</p>
<p class="card-text text-start">.....
</p>
<a href="https://getbootstrap.com/docs/5.2/components/card/" class="btn btn-primary">Go somewhere</a>
Go somewhere
Featured

Card title

<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<p class="card-title h5">Card title</p>
<p class="card-text text-start">........
</p>
<a href="https://getbootstrap.com/docs/5.2/components/card/" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
Go somewhere
2 days ago

Card 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 link Another link 
<div class="card">
<div class="card-body">
<p class="card-title h5">Card title</p>
<p class="card-text text-start">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="https://getbootstrap.com/docs/5.2/components/card/" class="card-link">Card link</a>
<a href="https://getbootstrap.com/docs/5.2/components/card/" class="card-link">Another link</a>
</div>
</div>
</div>

Card title

..............................

Last updated 3 mins ago

<div class="card bg-black border border-secondary">
<div class="row g-0">
<div class="col-md-4">
<img src="image/Contrast_Checker_AAA-pass.webp" class="img-fluid" alt="" style="height:100%;">
</div>
<div class="col-md-8">
<div class="card-body">
<p class="card-title h5 text-white">Card title</p>
<p class="card-text text-start">.......
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>

-carousel-Δ∇

Documentation 
<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 bg-dark active">
<img src="image/Contrast_Checker_AAAAA-pass.webp" class="img-fluid" alt="" style="min-width:20rem;" />
<div class="carousel-caption d-md-block">
<p class="h5">First slide label</p>
<p>............</p>
</div>
</div>
<div class="carousel-item bg-dark">
<img src="image/Contrast_Checker_AAAAA-pass.webp" class="img-fluid" alt="" style="min-width:20rem;" />
<div class="carousel-caption d-none d-md-block">
<p class="h5">Second slide label</p>
<p>.......................</p>
</div>
</div>
<div class="carousel-item bg-dark">
<img src="image/Contrast_Checker_AAAAA-pass.webp" class="img-fluid" alt="" style="min-width:20rem;" />
<div class="carousel-caption d-none d-md-block">
<p class="h5">Third slide label</p>
<p>................</p>
<pre class="prettyprint linenums text-start text-dark bg-light" style="white-space: pre-wrap;word-break: break-all;word-wrap: break-word;min-width:20rem;height:auto;"><code class="language-html" data-lang="html"><div class="carousel-inner">
<div class="carousel-item active">
<img src="image/Contrast_Checker_AAA-pass.webp" class="img-fluid" alt="" style="min-width:20rem;" />
<div class="carousel-caption d-md-block">
<p class="h5">Second slide label</p>
<p>............</p>
</div>
</div>
</code></pre>
</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>

-dropdowns-Δ∇

Documentation 
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
<div class="dropdown" style="margin-bottom:11rem;">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><h4 class="dropdown-header">Dropdown header</h4></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" style="margin-bottom:11rem;">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><h4 class="dropdown-header">Dropdown header</h4></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" style="margin-bottom:11rem;">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><h4 class="dropdown-header">Dropdown header</h4></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 class="btn-group" style="margin-bottom:8rem;">
<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" style="margin-bottom:8rem;">
<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" style="margin-bottom:8rem;">
<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" style="margin-bottom:8rem;">
<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" style="margin-bottom:8rem;">
<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" style="margin-bottom:8rem;">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger 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="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
<div class="dropend" style="margin-bottom:11rem;">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropend button
</button>
<ul class="dropdown-menu">
<li><h4 class="dropdown-header">Dropdown header</h4></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" style="margin-bottom:11rem;">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropup button
</button>
<ul class="dropdown-menu">
<li><h4 class="dropdown-header">Dropdown header</h4></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" style="margin-bottom:11rem;">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart button
</button>
<ul class="dropdown-menu">
<li><h4 class="dropdown-header">Dropdown header</h4></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 class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
End-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><h4 class="dropdown-header">Dropdown header</h4></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>

-list_group-Δ∇

Documentation
The current link item A second link item A third link item A fourth link item A disabled link item 
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print. 
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h4 class="mb-1">List group item heading</h4>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">
<div class="d-flex w-100 justify-content-between">
<h4 class="mb-1">List group item heading</h4>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h4 class="mb-1">List group item heading</h4>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item 
<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-danger">A simple danger 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>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

-modal-Δ∇

Documentation 
<button type="button" class="btn btn-primary mb-4" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
Launch demo modal
</button>

<div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-light bg-dark">
<h4 class="modal-title" id="exampleModalLabel">Modal title</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-black text-start">
<p> data-bs-toggle="modal" <br />data-bs-target="#exampleModalDefault"</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<button type="button" class="btn btn-primary mb-4" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">
Launch static backdrop modal
</button>

<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-light bg-dark">
<h4 class="modal-title" id="staticBackdropLiveLabel">Modal title</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-black text-start">
<p> data-bs-toggle="modal" <br />data-bs-target="#staticBackdropLive"</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>

<button type="button" class="btn btn-primary mb-4" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
Vertically centered scrollable modal
</button>

<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header text-light bg-dark">
<h4 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-black text-start">
<p class="mb-5 pb-5">This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.............................................................................................................................................................</p>
<p>This content should appear at the bottom after you scroll.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<button type="button" class="btn btn-primary mb-4" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">
Full screen
</button>

<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header text-light bg-dark">
<h4 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-black text-start">
<p> data-bs-toggle="modal" <br />data-bs-target="#exampleModalFullscreen"</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

-navs-Δ∇

Documentation 
<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">Disabled</a>
</nav>

<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">Disabled</a>
</li>
</ul>

-navbar-Δ∇

Documentation 
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="icon/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
style="filter: invert(1) grayscale(100%) brightness(200%);">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<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="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit">Search</button>
</form>
</div>
</div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="icon/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<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="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light" type="submit">Search</button>
</form>
</div>
</div>
</nav>

-pagination-Δ∇

Documentation 
<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>

<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>

<nav aria-label="Another pagination example">
<ul class="pagination pagination-lg flex-wrap">
<li class="page-item disabled">
<a class="page-link">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>

-toasts-Δ∇

Documentation 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header text-light bg-secondary">
<svg class="bd-placeholder-img rounded me-2" 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"/></svg>

<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body text-black">
Hello, world! This is a toast message.
</div>
</div>

-background-Δ∇

Documentation
This is default success background
This is 50% opacity success background
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>
This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
bg-primary bg-gradient
bg-secondary bg-gradient
bg-success bg-gradient
bg-danger bg-gradient
bg-warning bg-gradient
bg-info bg-gradient
bg-light bg-gradient
bg-dark bg-gradient
bg-body bg-gradient
bg-white bg-gradient
text-start.........................................
bg-transparent bg-gradient
.........................................text-end
<div class="bg-black p-3">
<div class="p-3 mb-2 bg-primary text-white bg-gradient"><code class="d-inline p-2 user-select-all">bg-primary bg-gradient</code></div>
<div class="p-3 mb-2 bg-secondary text-white bg-gradient"><code class="d-inline p-2 user-select-all">bg-secondary bg-gradient</code></div>
<div class="p-3 mb-2 bg-success text-white bg-gradient"><code class="d-inline p-2 user-select-all">bg-success bg-gradient</code></div>
<div class="p-3 mb-2 bg-danger text-white bg-gradient"><code class="d-inline p-2 user-select-all">bg-danger bg-gradient</code></div>
<div class="p-3 mb-2 bg-warning text-dark bg-gradient"><code class="d-inline p-2 user-select-all">bg-warning bg-gradient</code></div>
<div class="p-3 mb-2 bg-info text-dark bg-gradient"><code class="d-inline p-2 user-select-all">bg-info bg-gradient</code></div>
<div class="p-3 mb-2 bg-light text-dark bg-gradient"><code class="d-inline p-2 user-select-all">bg-light bg-gradient</code></div>
<div class="p-3 mb-2 bg-dark text-white bg-gradient"><code class="d-inline p-2 user-select-all">bg-dark bg-gradient</code></div>
<div class="p-3 mb-2 bg-body text-dark bg-gradient"><code class="d-inline p-2 user-select-all">bg-body bg-gradient</code></div>
<div class="p-3 mb-2 bg-white text-dark bg-gradient"><code class="d-inline p-2 user-select-all">bg-white bg-gradient</code></div>
<div class="p-3 mb-2 bg-transparent text-white bg-gradient">
<div class="container text-center clearfix">
  <div class="row">
    <div class="col-12 d-inline" style="position: relative;top: 10rem; left: 0px;line-height: 5rem;"><a href="https://getbootstrap.com/docs/5.2/migration/#utilities" target="_blank">text-start</a>.........................................<br />
      <code class="p-2 user-select-all text-white h4" style="position: relative;top: 0rem; left: 0rem;">bg-transparent bg-gradient</code>
    <br />.........................................<a href="https://getbootstrap.com/docs/5.2/migration/#utilities" target="_blank">text-end</a></div>
  </div>
</div>
</div>
</div>

-ratio-Δ∇

Documentation
ratio ratio-1x1
ratio ratio-4x3
ratio ratio-16x9
ratio ratio-21x9 
<div class="row row-cols-auto">
<div class="col-lg-3">
<div class="ratio ratio-1x1 bg-primary m-2 bg-opacity-50"><iframe width="560" height="315" src="https://www.youtube.com/embed/QlUjYD5AUXs" title="YouTube video player"></iframe></div>
<code class="d-block p-2 user-select-all">ratio ratio-1x1</code>
</div>
<div class="col-lg-3">
<div class="ratio ratio-4x3 bg-primary m-2 bg-opacity-50"><iframe width="560" height="315" src="https://www.youtube.com/embed/QlUjYD5AUXs" title="YouTube video player"></iframe></div>
<code class="d-block p-2 user-select-all">ratio ratio-4x3</code>
</div>
<div class="col-lg-3">
<div class="ratio ratio-16x9 bg-primary m-2 bg-opacity-50"><iframe width="560" height="315" src="https://www.youtube.com/embed/QlUjYD5AUXs" title="YouTube video player"></iframe></div>
<code class="d-block p-2 user-select-all">ratio ratio-16x9</code>
</div>
<div class="col-lg-3">
<div class="ratio ratio-21x9 bg-primary m-2 bg-opacity-50"><iframe width="560" height="315" src="https://www.youtube.com/embed/QlUjYD5AUXs" title="YouTube video player"></iframe></div>
<code class="d-block p-2 user-select-all">ratio ratio-21x9</code>
</div>
</div>
Δ
Thank you !!

Html Checker

McAfee SiteAdvisor®

Website Information Tool