Check below table to use alerts with different types and designs.

Referrals :

Buttons include support for a handful of contextual variations, sizes, states, and more. Group a series of buttons together on a single line with the button group.

Referrals :

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

HTML snippent:

        
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#"><i class="bx bx-home"></i></a></li>
            <li class="breadcrumb-item"><a href="#">Library</a></li>
            <li class="breadcrumb-item active" aria-current="page">Data</li>
          </ol>
        </nav>
        
      

Below have options that you can use with .breadcrumb :

Note: Add mentioned classes in <ol> element.

A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

Nested carousels are not supported.

Below have options that you can use with carousel :

• Carousel with caption
• Interval Options
• Disable on hover Pause
• Crossfade effect, etc..

Referrals :

The Bootstrap collapse plugin allows you to toggle content on your pages with a few classes thanks to some helpful JavaScript.

You can use a link with the href attribute, or a button with the data-target attribute.

Referrals :

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin.

Example Code:

        
              <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown button
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item" href="javascript:void(0);">Action</a>
                  <a class="dropdown-item" href="javascript:void(0);">Another action</a>
                  <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
                </div>
              </div>
        
      

Referrals :

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

Example Code:

  
      <ul class="list-group">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
      </ul>
  
            

Referrals :

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Example Code:

      
        <div class="modal" tabindex="-1" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="modal-body">
                <p>Modal body text goes here.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
      
      

Referrals :

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

The pagination component should be wrapped in a <nav> element to identify it as a navigation section to screen readers and other assistive technologies. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

Below have options that you can use with pagination :

Referrals :

Roll your own navigation style by extending the base .nav component. The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components.

Referrals :

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

Below have options that you can use with pills :

Referrals :

Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage.

Below have options that you can use with Tooltip :

Referrals :

Add small overlay content, like those found in iOS, to any element for housing secondary information.

Below have options that you can use with Popovers :

Referrals :

Small and adaptive badge for adding context to just about any content.

Below have options that you can use with .badge :

Referrals :

Use the .badge-pill modifier class with .badge to make more rounded (with a larger border-radius and additional horizontal padding).

Below have options that you can use with .badge-pill :

Referrals :

Stylize the HTML5 <progress> element.

Below have options that you can use with Progress :

Referrals :

The media object is an abstract element used as the basis for building more complex and repetitive components.

Referrals :

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

Referrals :

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

Referrals :