Buttons include support for a handful of contextual variations, sizes, states, and more. You can also group a series of buttons together on a single line.

Below are the options that you can use with buttons:

Referrals:

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

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

Referrals:

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

Below are the options that you can use with badges:

Referrals:

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

HTML Markup:

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" 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="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Other</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

Below are the options that you can use with dropdowns:

Referrals:

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

HTML Markup:

<div class="media">
    <img src="..." alt="Generic placeholder image">
    <div class="media-body">
        <h5>Media Title</h5>
        <p>Media text</p>
    </div>
</div>

Below are the options that you can use with media objects:

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> tag 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".

HTML Markup:

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="javascript:;" aria-label="Previous">Prev</a></li>
        <li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
        <li class="page-item active"><a class="page-link" href="javascript:;">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
        <li class="page-item"><a class="page-link" href="javascript:;" aria-label="Next">Next</a></li>
    </ul>
</nav>

Below are the options that you can use with pagination:

Referrals:

Stylize the html5 <progress> element.

Below are the options that you can use with progress bars:

Referrals:

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

HTML Markup:

<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">x</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>

Below are the options that you can use with modals:

Referrals:

The Bootstrap collapse 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. In both cases, the data-toggle="collapse" is required.

Below are the options that you can use with collapse:

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.

HTML Markup:

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

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

Below are the options that you can use with carousel:

• Carousel with Caption
• Interval Options
• Disable/Pause on Hover
• Wrap Option
• Crossfade Effect, etc.

Referrals:

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

Below are the options that you can use with popovers:

Referrals:

Takes the basic nav and adds .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions and to extend navigational tabs.

Below are the options that you can use with tabs:

Referrals:

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

Below are the options that you can use with tooltip:

Referrals:

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

Below are the options that you can use with spinners:

Referrals:

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

Referrals: