• StackApps

    • Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /webroot/release/deployment_104_2552d17d/html/docs/bootstrap-5/components/index.php on line 400

    Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /webroot/release/deployment_104_2552d17d/html/docs/bootstrap-5/components/index.php on line 400
    *[table] StackApps
  • *[bootstrap] Bootstrap
  • *[box] Components
    • Typography Content Layout Accordion Alert Badge Breadcrumb Button Callout Card Carousel Code Viewer Form List Modal Navbar, Nav & Tab Popover Progress Scrollspy Spinner Toast Tooltip *[folder-plus] Addons *[arrows-expand-vertical] Responsive Design *[filetype-css] Utility Classes *[palette] Colors *[code] Data Attributes *[percent] Template Variables

    Bootstrap 5 Components

    An overview of all Bootstrap 5 components and the respective stacks. You can jump from here to the Bootstrap 5 and stacks documentation for more details.
    *Use those tags as a guideline on how to enable the respective component within Stacks
    Stack*
    		The Bootstrap 5 component can be created via a Stack
    Advanced
    		The Stack provides functionality beyond what the vanilla Bootstrap 5 component offers
    Utility Classes
    		The Bootstrap 5 component can be created via the HTML stack and utility classes
    • You must use the Bootstrap 5 Theme in combination with a Bootstrap 5 stack
    • Bootstrap 5 and StackApps stacks work hand in hand, but Bootstrap 5 is not required for a basic StackApps setup.
    • When using the Bootstrap 5 stacks in RW / Stacks 5, you have to set the RW Bootstrap 5 Theme and use the Bootstrap 5 stack on every page

    *[fonts] Typography

    Examples of the Bootstrap typography, including headings, formating, and fonts.
    Stack
    Documentation Documentation

    Heading 1 Secondary Text

    Display 1 Secondary Text

    Stack
    Documentation Documentation
    This is a lead paragraph. It stands out from regular paragraphs.
    Utility Classes
    Documentation Documentation
    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.
    This line is rendered as code
    Use ⌘-C to copy
    Add a Bootstrap icon anyware
    Use those snippets within an HTML stack.
    Copy
    You can use the mark tag to <mark>highlight</mark> text.<br/>
<del>This line of text is meant to be treated as deleted text.</del><br/>
<s>This line of text is meant to be treated as no longer accurate.</s><br/>
<ins>This line of text is meant to be treated as an addition to the document.</ins><br/>
<u>This line of text will render as underlined.</u><br/>
<small>This line of text is meant to be treated as fine print.</small><br/>
<strong>This line rendered as bold text.</strong><br/>
<em>This line rendered as italicized text.</em><br/>
<code>This line is rendered as code</code><br/>
Use <kbd>&#8984;</kbd>-<kbd>C</kbd> to copy<br/>
Add a Bootstrap icon <i class="bi bi-bootstrap"></i> anyware
    Stack
    +
    Utility Classes
    Documentation Documentation
    A well-known quote, contained in a blockquote element.
    Someone famous in Source Title
    Create a quote by building the structure below using an HTML stack.
    Copy
    <figure >
    <blockquote  class="blockquote">
A well-known quote, contained in a blockquote element.
    </blockquote>
    <figcaption  class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
    </figcaption>
</figure>

    *[fonts] Fonts

    Using different fonts with Bootstrap.
    Stack
    +
    Advanced
    Documentation Documentation

    .font-primary System Font

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula tincidunt turpis, sed efficitur elit. Suspendisse potenti. Nulla facilisi. Cras fringilla sapien eu sem feugiat, in gravida sem vestibulum. Aliquam erat volutpat. Donec porta, magna ac aliquet lobortis, lorem tellus tincidunt lacus, nec vulputate nulla lectus at neque. Duis a lacus at sapien vestibulum pulvinar nec sed erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    .font-secondary Google Font "Oswald"

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula tincidunt turpis, sed efficitur elit. Suspendisse potenti. Nulla facilisi. Cras fringilla sapien eu sem feugiat, in gravida sem vestibulum. Aliquam erat volutpat. Donec porta, magna ac aliquet lobortis, lorem tellus tincidunt lacus, nec vulputate nulla lectus at neque. Duis a lacus at sapien vestibulum pulvinar nec sed erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    .font-tertiary Google Font "Raleway"

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula tincidunt turpis, sed efficitur elit. Suspendisse potenti. Nulla facilisi. Cras fringilla sapien eu sem feugiat, in gravida sem vestibulum. Aliquam erat volutpat. Donec porta, magna ac aliquet lobortis, lorem tellus tincidunt lacus, nec vulputate nulla lectus at neque. Duis a lacus at sapien vestibulum pulvinar nec sed erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    .font-success Google Font "Inter"

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula tincidunt turpis, sed efficitur elit. Suspendisse potenti. Nulla facilisi. Cras fringilla sapien eu sem feugiat, in gravida sem vestibulum. Aliquam erat volutpat. Donec porta, magna ac aliquet lobortis, lorem tellus tincidunt lacus, nec vulputate nulla lectus at neque. Duis a lacus at sapien vestibulum pulvinar nec sed erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    *[body-text:0.75x] Content

    Examples of the Bootstrap content types like heading, figures, media and paragraphs.

    *[type-h1] Headings

    Examples for headings in Bootstrap.
    Stack
    Documentation Documentation

    h1 Heading

    h2 Heading

    h3 Heading

    h4 Heading

    h5 Heading
    h6 Heading

    *[type-h1] Customizing Headings

    Fancy heading with faded secondary text

    *[type-h1] Headings

    Examples for displaying headings in Bootstrap.
    Stack
    Documentation Documentation

    Display 1

    Display 2

    Display 3

    Display 4

    Display 5

    Display 6

    *[image] Figures

    Examples for displaying related images and text with the figure component in Bootstrap.
    Stack
    +
    Utility Classes
    Documentation Documentation
    A caption for the above image.
    Create a Figure by building the structure below using HTML and Media stacks.
    Copy
    <figure class="figure">
    ((( Media stack )))
    <figcaption " class="figure-caption">A caption for the above image.</figcaption>
</figure>

    *[image] Media

    Examples for opting images and videos into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
    Stack
    +
    Advanced
    Documentation Documentation

    *[paragraph] Paragraphs

    Various text formats end up as a paragraph.
    Stack
    +
    Advanced
    Documentation Documentation

    *[sliders] HTML

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
    • Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
    • Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam.
    • Ac massa aliquet.
    Copy
    <ul>
    <li>Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.</li>
    <li>Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam.</li>
    <li>Ac massa aliquet.</li>
</ul>

    *[sliders] RTF

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    *[sliders] Markdown

    Heading

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Copy
    ### Lorem ipsum dolor sit amet

sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    *[grid-1x2:0.8x] Layouts

    Examples of the Bootstrap layout capabilities like breakpoints, containers, grids, tables, etc.

    *[arrows-collapse-vertical] Breakpoints

    Breakpoints are selected screen widths that determine how your responsive layout adapts across device or viewport sizes.
    Utility Classes
    Documentation Documentation
    Breakpoint Class infix Dimensions
    Extra small none < 576 px
    Small sm 576–768 px
    Medium md 768–992 px
    Large lg 992–1200 px
    Extra large xl 1200–1400 px
    Extra extra large xxl > 1400 px

    *[view-list] Containers

    Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
    Stack
    +
    Advanced
    Documentation Documentation
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    A container with a p-4 padding (1.5rem), bg-success-subtle background and a border border-success
    none • ms-3 me-3
    container
    container-sm
    container-md
    container-lg
    container-xl
    container-xxl
    container-fluid • max-width: 900px

    *[grid] Grids

    Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
    Stack
    Documentation Documentation

    *[sliders] Row Columns & Breakpoints

    Stack
    Documentation Documentation
    class="row row-cols-1 row-cols-md-3"
    Column 1
    Column 2
    Column 3

    *[sliders] Columns & Breakpoints

    Column 1

    col-xs-12
    col-sm-6
    col-md-4

    Column 2

    col-xs-12
    col-sm-6
    col-md-4

    Column 3

    col-xs-12
    col-sm-6
    col-md-4

    Column 1

    col-xs-12
    col-sm-6
    col-md-3

    Column 2

    col-xs-12
    col-sm-6
     

    Column 3

    col-xs-12
    col-sm-6
    col-md-3

    *[table] Tables

    Examples for opt-in styling of tables with Bootstrap.
    Stack
    +
    Advanced
    Documentation Documentation
    A plain table
    First Last Handle
    Mark Otto @mdo
    Jacob Thornton @fat
    John Doe @social
    A colored Table
    Class Cell Cell
    Default Cell Cell
    Primary Cell Cell
    Secondary Cell Cell
    Success Cell Cell
    Danger Cell Cell
    Warning Cell Cell
    Info Cell Cell
    Light Cell Cell
    Dark Cell Cell

    *[boxes] Components

    *[box] Accordions

    Build vertically collapsing accordions in combination with the Collapse JavaScript plugin.
    Stack
    +
    Advanced
    Documentation 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.

    *[box] Alerts

    Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
    Stack
    Documentation Documentation

    *[box] Badges

    Badges, our small count and labeling component.
    Utility Classes
    Documentation Documentation

    *[sliders] Color

    Primary Secondary Success Danger Warning Info Light Dark

    *[sliders] Size

    Example heading New

    Example heading New

    Example heading New

    Example heading New

    Example heading New
    Example heading New
    Create a Badge by adding the snippet below into a Heading stack or just adding badge text-bg-secondary as utility classes to your HTML stack.
    Copy
    Example heading <span class="badge text-bg-secondary">New</span>

    *[sliders] Button

    Notifications 4
    Create a Badge by adding the snippet below as Button text.
    Copy
    Notifications
<span class="badge text-bg-danger">4</span>
    Inbox 99+
    Create a Badge by adding the snippet below as Button text and adding position-relative to the Button classes
    Copy
    Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">99+</span>

    *[box] Breadcrumbs

    Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
    Stack
    Documentation Documentation

    *[box] Buttons

    Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
    Stack
    +
    Advanced
    Documentation Documentation

    *[sliders] Standard

    Primary Secondary Success Danger Warning Info Light Dark Link

    *[sliders] Outline

    Primary Secondary Success Danger Warning Info Light Dark Link

    *[sliders] Dropdown

    Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
    DropDown
    DropDown
    DropDown
    DropDown
    DropDown
    DropDown
    DropDown
    DropDown
    DropDown

    *[sliders] Size

    Primary Primary Primary

    *[sliders] Button groups

    Group a series of buttons together on a single line or stack them in a vertical column.
    Stack
    +
    Utility Classes
    Documentation Documentation
    1 2 3 4 5
    1 2 3 4 5
    Create a Button group by adding buttons into an HTML stack.
    Copy
    <div class="btn-group" role="group">
((( Button ))) ((( Button ))) ((( Button ))) ...
</div>

    *[box] Callouts

    Bootstrap’s callouts provide a subtle way to highlight important information within your content.
    Stack
    +
    Advanced
    Documentation Documentation

    Heading

    Heading

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    *[box] Cards

    Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
    Stack
    Documentation Documentation
    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
    2 day ago
    Card Title
    Some quick example text to build on the card title and make up the bulk of the card's content.
    Card Link
    Card Title
    Some quick example text.

    *[box] Carousels

    A slideshow component for cycling through elements, images or slides of text like a carousel.
    Stack
    Documentation Documentation

    *[box] Code Viewers

    Show code snippets with syntax highlighting and a *[copy:sm] copy button.
    Stack
    +
    Utility Classes
    +
    Advanced
    Documentation Documentation
    The snippet below creates the code viewer in a Paragraph stack using MD mode
    Copy
    <div class="mb-1 text-end fs-7"><i class="bi bi-copy"> </i><a href="#" class="text-body text-decoration-none" onclick="event.preventDefault(); copyCode(this)">Copy</a></div>

    [your code goes here]

    *[box] Collapse

    Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
    Stack
    Documentation Documentation
    Collapse Down Collapse Right Collapse Multi Hover Down

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    *[box] Forms & Inputs

    Form and control styles, layout options, and custom components for creating a wide variety of forms.
    Stack
    +
    Advanced
    Documentation Documentation

    *[sliders] Standard

    Input required
    Input required
    Input required
    Input required
    Input required
    Input required

    *[sliders] Floating Labels

    Input required
    Input required
    Input required
    Input required
    Input required
    Input required

    *[sliders] Input Groups

    First name Last name
    Address
    Input required
    ZIP City
    Country
    Input required

    *[box] Lists

    List are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

    *[box] Description lists

    Stack
    +
    Advanced
    Documentation Documentation
    Term
    Definition
    Term
    Definition
    Term
    Definition
    Term
    Definition
    Term
    Definition
    Term
    Definition
    Term
    Definition
    Term
    Definition
    Term
    Definition

    *[box] Dot leaders

    Stack
    +
    Advanced
    Documentation Documentation
    Label
    Value
    Label
    Value
    Label
    Value
    Label
    Value
    Label
    Value
    Label
    Value
    Label
    Value
    Label
    Value
    Label
    Value

    *[box] List groups

    Stack
    Documentation Documentation
    The first item The second item The third item The fourth item
    The first item The second item The third item The fourth item
    A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

    *[box] Modals

    Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
    Stack
    Documentation Documentation
    Open default Modal Open extra large Modal

    *[box] Navbars, Navs & Tabs

    Bootstrap’s powerful, responsive navigation components, including navbars.

    *[box] Navbars

    Stack
    +
    Advanced
    Documentation Documentation

    *[box] Sidebar Navs

    Stack
    +
    Advanced
    Documentation Documentation
    Menu
    Menu

    *[box] Navs

    Stack
    Documentation Documentation

    *[box] Tabs

    Stack
    +
    Advanced
    Documentation Documentation
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    *[box] Offcanvas

    Build hidden sidebars into your project for navigation, shopping carts, and more
    Stack
    Documentation Documentation
    Open Right Menu Open Bottom Menu Open Left Menu Open Top Menu
    Menu
    Hello, world! This is a offcanvas message.
    Menu
    Hello, world! This is a offcanvas message.
    Menu
    Hello, world! This is a offcanvas message.
    Menu
    Hello, world! This is a offcanvas message.

    *[box] Popovers

    Adding Bootstrap popovers, like those found in iOS, to any element on your site.
    Utility Classes
    Documentation Documentation
    Popover on top Popover on right Popover on bottom Popover on left
    Create a Popover by adding the following attributes to the element
    Copy
    <div data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="top" data-bs-title="Popver on top" data-bs-content="Top popover">
    Popover on top
</div>

    *[box] Progress

    Bootstrap's custom progress bars featuring support for animated backgrounds and text labels.
    Stack
    +
    Advanced
    Documentation Documentation

    *[sliders] Standard

    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%

    *[sliders] Auto Color

    33%
    66%
    100%

    *[sliders] Animated & Striped

    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%

    *[sliders] Sizes

    50%
    50%
    50%

    *[box] Scrollspys

    Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
    Stack
    Documentation Documentation

    Nav Item 1 ^nav-item-1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula tincidunt turpis, sed efficitur elit. Suspendisse potenti. Nulla facilisi. Cras fringilla sapien eu sem feugiat, in gravida sem vestibulum. Aliquam erat volutpat.

    Donec porta, magna ac aliquet lobortis, lorem tellus tincidunt lacus, nec vulputate nulla lectus at neque. Duis a lacus at sapien vestibulum pulvinar nec sed erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula tincidunt turpis, sed efficitur elit. Suspendisse potenti. Nulla facilisi. Cras fringilla sapien eu sem feugiat, in gravida sem vestibulum. Aliquam erat volutpat.

    Donec porta, magna ac aliquet lobortis, lorem tellus tincidunt lacus, nec vulputate nulla lectus at neque. Duis a lacus at sapien vestibulum pulvinar nec sed erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Nav Item 2 ^nav-item-2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula tincidunt turpis, sed efficitur elit. Suspendisse potenti. Nulla facilisi. Cras fringilla sapien eu sem feugiat, in gravida sem vestibulum. Aliquam erat volutpat.

    Donec porta, magna ac aliquet lobortis, lorem tellus tincidunt lacus, nec vulputate nulla lectus at neque. Duis a lacus at sapien vestibulum pulvinar nec sed erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula tincidunt turpis, sed efficitur elit. Suspendisse potenti. Nulla facilisi. Cras fringilla sapien eu sem feugiat, in gravida sem vestibulum. Aliquam erat volutpat.

    Donec porta, magna ac aliquet lobortis, lorem tellus tincidunt lacus, nec vulputate nulla lectus at neque. Duis a lacus at sapien vestibulum pulvinar nec sed erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Nav Item 3 ^nav-item-3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula tincidunt turpis, sed efficitur elit. Suspendisse potenti. Nulla facilisi. Cras fringilla sapien eu sem feugiat, in gravida sem vestibulum. Aliquam erat volutpat.

    Donec porta, magna ac aliquet lobortis, lorem tellus tincidunt lacus, nec vulputate nulla lectus at neque. Duis a lacus at sapien vestibulum pulvinar nec sed erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula tincidunt turpis, sed efficitur elit. Suspendisse potenti. Nulla facilisi. Cras fringilla sapien eu sem feugiat, in gravida sem vestibulum. Aliquam erat volutpat.

    Donec porta, magna ac aliquet lobortis, lorem tellus tincidunt lacus, nec vulputate nulla lectus at neque. Duis a lacus at sapien vestibulum pulvinar nec sed erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    *[box] Spinners

    Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
    Utility Classes
    Documentation Documentation

    *[sliders] Border

    *[sliders] Grow

    *[sliders] Sizes

    Create a Spinner by adding the snippet below into a HTML stack or just adding 'badge text-bg-secondary' as utility classes to your HTML stack.
    Copy
    <div class="spinner-grow text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

    *[box] Toasts

    Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
    Stack
    Documentation Documentation

    *[box] Tooltips

    Adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
    Utility Classes
    Documentation Documentation
    Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left Tooltip on top
    Create a Tooltip by adding the following attributes to the element
    Copy
    <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
    Tooltip on top
</div>