Components

Over a dozen reusable components built to provide alerts, badges, tooltips, popovers, modals and much more.

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual classes (e.g., .alert-success).

Badges

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

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Default Primary Success Info Warning Danger Gray
Pill badges

Add any of the below mentioned modifier classes to change the appearance of a badge.

15 7 158 33 5 more...
Breadcrumb

Indicate the current page’s location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content.

  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data
Tooltips

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

Static demo

Four options are available: top, right, bottom, and left aligned.

Interactive demo

Hover over the buttons below to see their tooltips.

Popovers

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

Static demo

Four options are available: top, right, bottom, and left aligned.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Live demo

Hover over the buttons below to see their tooltips.

Dismissible
Modals

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

Basic Modals
Modal Sizes
Modal Styles

Add modifier classes with the .modal-* ones to style a modal.

Pagination

Provide pagination links for your site or app with the multi-page pagination component.

Progress

Use our custom progress component for displaying simple or complex progress bars.

Basic Progress
start downloading... 0%
downloading... 25%
25%
downloading... 50%
50%
downloading... 75%
70%
downloading finished! 100%
100%
Backgrounds

Use background utility classes to change the appearance of individual progress bars.

Multiple bars

Include multiple progress bars in a progress component if you need.

Striped

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

Animated stripes

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

Progress Sizes

Uses classes like .progress-xl,.progress-lg,.progress-sm & .progress-xs for Large, Small and Extra Small sized progress. For Default progress, No size class needed.

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

Slides only

Here’s a carousel with slides only. Note the presence of the .d-block and .img-fluid on carousel images to prevent browser default image alignment.

With controls, indicators and captions

Adding in the previous and next controls, indicators and captions to the carousel.

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.