Accordion

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
Read the official Bootstrap Documentation for a full list of instructions and other options.

You can use a link with the href attribute, a button and any other element with the data-bs-target attribute.

In all cases, the data-bs-toggle="collapse" is required.

Accordion Options Class Description
Accordion Border .accordion-border Use this class to add border around accordion.
Accordion Margin .accordion-margin Use this class to add margin to accordion.
Accordion Hover data-open-hover="true"

Makes your accordion open on hover.

Note: data-open-hover="true" is not a class it's an attribute.

Referrals :

Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Start using alerts with no worries!

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

Alert Type Class Description
Default alert .alert.alert-{color}

Use these classes to make alert.

color: {primary | secondary | success | danger | warning | info | dark}

Alert Title .alert-heading Use this class inside .alert to create alert with title.
Dismissible Alerts .alert-dismissible Use this class along with .alert and also add .btn-close button inside .alert to make dismissible alert. It adds extra padding to the right of the alert and positions the .btn-close button.
Alerts with icons N/A Just add icon before your alert text to create a alert with icon.

Referrals :

Avatar

Often you need to add an user's avatar to your app. In order to make this we have the component.
Note: You have to use inline attributes for avatar image size.

Use below mentioned code to create an avatar.


<!-- Avatar with Image -->
<div class="avatar">
    <img src="..." alt="..." width="32" height="32" />
</div>

<!-- Avatar with Content -->
<div class="avatar">
    <span class="avatar-content">
        <!-- You can add Initial letters instead of icon -->
        <i data-feather="github" class="avatar-icon"></i>
    </span>
</div>

      
Avatar Type Class Description
Background Color .avatar.bg-{color}

Use these classes to make an avatar with background color.

color: {primary | secondary | success | danger | warning | info}

Light Background Color .bg-light-{color}

Use these classes to make an avatar with light background color.

color: {primary | secondary | success | danger | warning | info}

Avatar with Icon .avatar-icon Use this class along with the icon element which is inside .avatar-content inside .avatar
Avatar Sizes .avatar-{size}

Use this class for different avatar sizes.

size: {sm | lg | xl}

Avatar Status .avatar-status-{value}

Adds little element to avatar which represents user's status. Use this class as a sibling to <img> tag or .avatar-content class.

value: {online | offline | away | busy}

Avatar Group .avatar-group Use this class to wrap all the avatars so that all avatars overlap on previous avatars. You may use .pull-up class to have some effect on hover.

Referrals :

Badges

Small and adaptive badge for adding context to just about any content.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Below are the options that you can use :

Badges options Class Description
Basic Badges .bg-{color}

Use this class along with .badge class for different background colored badges.

color: {primary | secondary | success | danger | warning | info | dark}

Badges with Light Background Color .badge-light-{color}

Use this class along with .badge class for badges with light background colors.

color: {primary | secondary | success | danger | warning | info | dark}

Glow Badges .badge-glow

Use this class along with .bg-{color} to add glow effect to contextual badge.

color: {primary | secondary | success | danger | warning | info | dark}

Badges with Icon N/A Just add icon inside any badge.

Referrals :

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS through ::before and content. They can be changed by changing $breadcrumb-divider.
Read the official Bootstrap Documentation for a full list of instructions and other options.

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

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

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

Referrals :

Buttons

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.
Read the official Bootstrap Buttons Documentation and Bootstrap Button Group Documentation for a full list of instructions and other options.

Buttons options Class Description
Basic button .btn-{color}

Use this class along with .btn class for contextual classes.

color: {primary | secondary | success | danger | warning | info | dark}

Outline button .btn-outline-{color}

Use this class along with .btn class for outline or bordered buttons.

color: {primary | secondary | success | danger | warning | info | dark}

Flat button .btn-flat-{color}

Use this class along with .btn class for flat buttons.

color: {primary | secondary | success | danger | warning | info | dark}

Gradient button .btn-gradient-{color}

Use this class along with .btn class for gradient background colors for buttons.

color: {primary | secondary | success | danger | warning | info | dark}

Relief button .btn-relief-{color}

Use this class along with .btn class for relief buttons.

color: {primary | secondary | success | danger | warning | info | dark}

Round button .round Use this class for round button.
Square button .square Use this class for square button.
Button with icon N/A Just add icon before your button text for button with icons.
Button with icon only .btn-icon

Use this class along with .btn class if you want only icon inside a button.

Note: You can use .btn-icon only when you want icon without text in your button.

You can also use .rounded-circle class for round button with icon only.

Button Size .btn-{size}

Use this class for different button sizes.

size: {sm | lg}

Button group .btn-group Group a series of buttons together on a single line with the the help of this class.
Button Pinned .btn-pinned Button Pinned class is used to pinned the button on top right position of its div or parent element.

Referrals :

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.).
Read the official Bootstrap Documentation for a full list of instructions and other options.

Nested carousels are not supported.

Below are the options that you can use :

  • Carousel with caption
  • Interval Options
  • Disable on hover Pause
  • Dark variant
  • Cross-fade effect, etc.

Referrals :

Collapse

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Read the official Bootstrap Documentation for a full list of instructions and other options.

You can use a link with the href attribute, a button and any other element with the data-bs-target attribute.

In all cases, the data-bs-toggle="collapse" is required.

Referrals :

Divider

Divide text or section components with some great features which are easy to implement.

Use below mentioned code to create a divider.

    
    <div class="divider">
    <div class="divider-text">My Text</div>
</div>
    
          
Divider Type Class Description
Basic Divider <hr> Use this tag to create a divider.
Divider with Text .divider-text Use this class inside .divider class to write some text between the divider.
Position .divider-{position}

Use this class along with .divider to position your text within the divider.

position: {start | start-center | end | end-center}

Colors .divider-{color}

Use this class for colored divider.

color: {primary | secondary | success | danger | warning | info | dark}

Style .divider-{style}

Use this class to give style to your divider.

style: {dotted | dashed}

Referrals :

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Example Code:

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

            
Dropdown Options Class Description
Directions .drop{direction}

Use this class along with .btn-group to position your dropdown menu relative to the dropdown button.

direction: {up | end | start}

Active item in Dropdown Menu .active Use this class along with .dropdown-item to show any active item in dropdown menu.
Disabled item in Dropdown Menu .disabled Use this class along with .dropdown-item to show any disabled item in dropdown menu.
Right Aligned Dropdown Menu .dropdown-menu-end Use this class to align the dropdown menu to the end/right side.
Header in Dropdown Menu .dropdown-header Use this class to add a header inside the dropdown menu.
Divider in Dropdown Menu .dropdown-divider Use this class to add a divider inside the dropdown menu.

Referrals :

List Group

List groups are 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.

Read the official Bootstrap Documentation for a full list of instructions and other options.

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>
  
            
List Group Options Class Description
Active item .active Use this class along with .list-group-item to show any active item.
Disabled item .disabled Use this class along with .list-group-item to show any disabled item.
No Border around List Group .list-group-flush Use this class along with .list-group to remove borders around the list group.
Numbered List Group .list-group-numbered Add the .list-group-numbered modifier class to opt into numbered list group items.
Horizontal List Group .list-group-horizontal Use this class along with .list-group to show list group horizontally.
Contextual Classes .list-group-item-{color}

Use contextual classes along with .list-group-item to style list items with a stateful background and color.

color: {primary | secondary | success | danger | warning | info | dark}

Referrals :

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Example Code:

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                Modal Content
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
            </div>
        </div>
    </div>
</div>

            
Modal options Class Description
Contextual Modals .modal-{color}

Use this class along with .modal class for contextual modal header, close button and button in modal footer.

color: {primary | secondary | success | danger | warning | info | dark}

Modal sizes .modal-{size]

Use this class along with .modal-dialog for create modal with different sizes.

size: {xs | sm | lg | xl}

Referrals :

Roll your own navigation style by extending the base .nav component. All Bootstrap’s nav components are built on top of this by specifying additional styles. Includes styles for the disabled state, but not the active state.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Below are the options that you can use :

Navs options Class Description
Navs with Border .wrap-border Use this class for border around nav component.
Navs with Square Border .square-border Use this class along with .wrap-border for square border around nav component.
Alignment of Navs .justify-content-{direction}

Use this class along with .nav to align navs horizontally at start, center or end.

direction: {start | center | end}

Vertical Navs .flex-column Use this class along with .nav for vertical navs.

Referrals :

Offcanvas

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and data attributes are used to invoke our JavaScript.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Below are the options that you can use :

Offcanvas options Class Description
Start Placement .offcanvas-start Use this class to places offcanvas on the left of the viewport.
End Placement .offcanvas-end Use this class to places offcanvas on the right of the viewport.
Top Placement .offcanvas-top Use this class to places offcanvas on the top of the viewport.
Bottom Placement .offcanvas-bottom Use this class to places offcanvas on the bottom of the viewport.
Enable body scrolling data-bs-scroll="true" Use this data-bs-scroll attribute to toggle body scrolling.
Disable Backdrop data-bs-backdrop ="false" Use this data-bs-backdrop attribute to toggle the backdrop.

Referrals :

Pagination

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="Page Navigation".

Read the official Bootstrap Documentation for a full list of instructions and other options.

Below are the options that you can use :

Pagination options Class Description
Active Link .active Use this class along with .page-item for active link in the pagination.
Separated Pagination .prev-item & .next-item Use these classes along with .page-item to create separated pagination arrows for previous and next pagination items.
Pagination with arrows .prev & .next Use these classes along with .page-item to create pagination with arrows for previous and next items.
Colored Pagination .pagination-{color}

Use this class along with .pagination for colored pagination.

color: {primary | secondary | success | danger | warning | info | dark}

Alignment of Pagination .justify-content-{direction}

Use this class along with .pagination to align pagination horizontally at start, center or end.

direction: {start | center | end}

Pagination Sizes .pagination-{size}

Use this class along with .pagination for different sizes of pagination.

size: {sm | lg}

Referrals :

Pill badges

Use the .rounded-pill modifier class with .badge class to make badges more rounded.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Below are the options that you can use :

Pill badges options Class Description
Basic Colored Pill badges .bg-{color}

Use this class along with .badge.rounded-pill for colored pill badges.

color: {primary | secondary | success | danger | warning | info | dark}

Light Pill badges .badge-light-{color}

Use this class along with .badge.rounded-pill for light background colored pill badges.

color: {primary | secondary | success | danger | warning | info | dark}

Glowing Pill Badges .badge-glow Use this class along with .badge.rounded-pill to add glowing effect to the pill badges.
Pill Badges as Notification .badge-up Use this class along with .badge.rounded-pill to set pill badge to higher than other text so that it looks like notification count.
Block Pill Badges .d-block Use this class along with .badge.rounded-pill to make pill badge as a block element.

Referrals :

Pills Component

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.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Below are the options that you can use :

Pills options Class Description
Basic Pills .nav-pills Use this class along with .nav and add .active class along with .nav-link to style your active link in .nav.
Filled Pills .nav-fill Use this class along with .nav.nav-pills to proportionately fill all available space with your .nav-items
Justified Pills .nav-justified Use this class along with .nav.nav-pills to force pills with equal width.
Vertical Pills .flex-column Use this class along with .nav.nav-pills for vertical style of the pills.
Alignment of Pills .justify-content-{direction}

Use this class along with .nav.nav-pills to align nav pills horizontally at start, center or end.

direction: {start | center | end}

Pill Colors .nav-pill-{color}

Use this class along with .nav.nav-pills for colored nav pills.

color: {primary | secondary | success | danger | warning | info | dark}

Alignment of Text inside Pills .nav-{direction}

Use this class along with .nav.nav-pills to align texts left or right side inside the nav pills.

direction: {left | right}

Referrals :

Popovers

Add small overlay content, like those found in iOS, to any element.

Popovers requires data-bs-toggle="popover". To add popover text, use data-bs-content="Popovers text".

Read the official Bootstrap Documentation for a full list of instructions and other options.

Below are the options that you can use :

Popovers options Attribute Description
Popovers Positions data-bs-placement="{position}"

Use this attribute to position the popover relative to your target element.

position: {top | right | bottom | left} [Default position: right]

Trigger Popover data-bs-trigger="{method}"

Use this attribute for how the popover is triggered. You may pass multiple triggers; separate them with a space.

method: {click | hover | focus | manual} [Default method: 'click']

Popover Animation data-bs-animation="{boolean}"

Use this attribute to show or do not show animation on trigger of popover.

position: {true | false} [Default: true]

Delay Show/Hide Popovers data-bs-delay="{number}"

Use this attribute to delay showing and hiding of popover (ms) - does not apply to manual trigger type.

number: number of ms that popover should delay

Referrals :

Progress

Progress bars features support for stacked bars, animated backgrounds, and text labels.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Below are the options that you can use :

Progress options Class Description
Basic Progress .progress & .progress-bar Use these classes to create progress bar. Use .progress as a wrapper of .progress-bar.
Colored Progress .progress-bar-{color}

Use this class along with .progress for contextual progress bar.

color: {primary | secondary | success | danger | warning | info | dark}

Labeled Progress N/A Add labels to your progress bars by placing text within the .progress-bar.
Multiple Bars N/A Include multiple .progress-bar in .progress.
Striped Progress .progress-bar-striped Use this class along with .progress-bar for stripped progress bar.
Animated Striped Progress .progress-bar-animated Use this class along with .progress-bar.progress-bar-striped for animated stripped progress bar.

Referrals :

Spinners

Spinners can be used to show the loading state. For accessibility purposes, each loader here includes role="status" and a nested <span class="visually-hidden">Loading...</span>.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Use below mentioned code to create a basic spinner :

    
<div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
    
      
Progress options Class Description
Border Spinner .spinner-border Use this class for basic border spinner.
Colored Border Spinner .text-{color}

Use this class along with .spinner-border for colored border spinner.

color: {primary | secondary | success | danger | warning | info | dark}

Growing Spinner .spinner-grow Use this class for basic growing spinner.
Colored Growing Spinner .text-{color}

Use this class along with .spinner-grow for colored growing spinner.

color: {primary | secondary | success | danger | warning | info | dark}

Alignment of Spinner flex, .float-{float-side} or .text-{text-side}

Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.

float-side: {start | end | none}

text-side: {start | center | end}

Referrals :

Tabs Component

Takes the basic nav and add .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions and to extend navigational tabs.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Below are the options that you can use :

Tabs options Class Description
Basic Tabs .nav-tabs Use this class along with .nav and add .active class along with .nav-link to style your active link in .nav.
Filled Tabs .nav-fill Use this class along with .nav.nav-tabs to proportionately fill all available space with your .nav-items
Justified Tabs .nav-justified Use this class along with .nav.nav-tabs to force tabs with equal width.
Vertical Tabs .nav-vertical & .nav-{direction}

Use .nav-vertical class as wrapper of .nav.nav-tabs and .tab-content to form vertical nav tabs. Use .nav left to align the vertical nav tabs on left side of the tab contents and use .nav right to align the vertical nav tabs on right side of the tab contents.

direction: {left | right}

Alignment of Tabs .justify-content-{direction}

Use this class along with .nav.nav-tabs to align nav tabs horizontally at start, center or end.

direction: {start | center | end}

Alignment of Text inside Tabs .nav-{direction}

Use this class along with .nav.nav-tabs to align texts left or right side inside the nav tabs.

direction: {left | right}

Referrals :

Timeline

Timeline is a list of important events arranged in the order in which they happened starting with the recent event.

Below are the options that you can use :

Tabs options Class Description
Timeline Wrapper .timeline Use this class as a wrapper of all timeline items.
Timeline Item .timeline-item Use this class to wrap all the content and timeline-point of one timeline item.
Timeline Point/Separator .timeline-point Use this class inside .timeline-item to indicate separation between two timeline items.
Timeline Indicator .timeline-point-indicator Use this class along with .timeline-point for smaller timeline point along with background color and shadow effect.
Colored Timeline Point .timeline-point-{color}

Use this class along with .timeline-point.timeline-point-indicator for contextual timeline points.

color: {primary | secondary | success | danger | warning | info | dark} [Default color: primary]

Timeline Point with Icon N/A Add any icon inside .timeline-point class to have an icon inside the timeline point. If you give any color to a timeline point, the svg icon will automatically inherit the color.
Timeline Event .timeline-event Use this class inside .timeline-item to write your content of one timeline item. You can use any element inside this class.

Referrals :

Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

Use below mentioned code to create a basic toast :


<button class="btn btn-outline-primary toast-toggler">Toast</button>
<div class="toast toast-basic" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="ms-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close">
        </button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

      
var basicToast = document.querySelector('.basic-toast');
var basicToastBtn = document.querySelector('.toast-basic-toggler');
var showBasicToast = new bootstrap.Toast(basicToast);

basicToastBtn.addEventListener('click', function () {
  showBasicToast.show();
});

      

Referrals :

Tooltips

Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Tooltip requires data-bs-toggle="tooltip". To add tooltip text, use title="Tooltip title".

Below are the options that you can use :

Tooltip options Attribute Description
Tooltip Positions data-bs-placement="{direction}"

Use this attribute to position your tooltip with relative to the target element.

direction: {top | right | bottom | left} [Default position: top]

Tooltip Triggers data-bs-trigger="{method}"

Use this attribute for how the tooltip is triggered. You may pass multiple triggers; separate them with a space.

method: {click | hover | focus | manual} [Default method: 'hover focus']

Tooltip Animation data-bs-animation="{boolean}"

Use this attribute to show or do not show animation on trigger of tooltip.

position: {true | false} [Default: true]

Delay Show/Hide Popovers data-bs-delay="{number}"

Use this attribute to delay showing and hiding of tooltip (ms) - does not apply to manual trigger type.

number: number of ms that tooltip should delay

Referrals :