Arches: CVquality

Arches:CVquality

Multi Product Brand Style System by the American College of Cardiology

Bootstrap

Source: dist/css/cvquality_boot.css, line 10138

3 Bootstrap

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/cvquality_boot.css, line 7287

3.1 Buttons

Basic Buttons

Example s

.clear

All button states can become hollow

clear button

.radius

Give the button softer corners

radius button
<a class="btn btn-primary [modifier class]" href="#">[modifier class] button</a>
<button class="btn btn-primary [modifier class]" href="#">[modifier class] button</button>
Copy Code

Source: dist/css/cvquality_boot.css, line 10148

3.4 Typography

The collection of typography when using the bootstrap foundation of arches.

Example

Default styling

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.

Someone famous in Source Title
  • 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.
  • This is a list item.
  • And another one.
  • But they're displayed inline.
PlaceholderResponsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera200x200
<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>
Copy Code

Source: dist/css/cvquality_boot.css, line 10161

3.5 Tables

The collection of modifications you can do with tables out of the box from Bootstrap Arches.

Example

Default styling

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
ClassHeadingHeading
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
alertCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Placeholder400x300
A caption for the above image.
<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>
Copy Code

Source: dist/css/cvquality_boot.css, line 10176

3.6 Forms

Out of the box bootstrap forms.

Example

Default styling

Overview

Documentation
We'll never share your email with anyone else.
Radios buttons

Disabled forms

Documentation
Disabled radios buttons

Input group

Documentation
@
@example.com
https://example.com/users/
$ .00
With textarea

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.
<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>
Copy Code

Source: dist/css/cvquality_boot.css, line 10610

3.7 Components

Out of the box html components from bootstrap

Example

Default styling

Accordion

Documentation

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Primary Secondary Success alert Warning Info Light Dark

Buttons

Documentation
Placeholder Image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Featured
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
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
Placeholder Image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Popovers

Documentation

Scrollspy

Documentation

@fat

Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

@mdo

Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.

one

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.

And some more placeholder content, for good measure.

Spinners

Documentation
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Tooltips

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