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

Primary! Start your day with some alerts.
Success! You successfully read this important alert message.
Info! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Danger! Change a few things up and try submitting again.
Gray! You are using some gorgeous custom colors.

##### 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`.

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

Tooltip on the top
Tooltip on the right
Tooltip on the bottom
Tooltip on the left

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

#### Default Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni suscipit. Dicta dolorem earum esse, fugiat harum minus neque nesciunt, quas reiciendis rem repudiandae rerum? Adipisci et labore laborum quidem!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni suscipit. Dicta dolorem earum esse, fugiat harum minus neque nesciunt, quas reiciendis rem repudiandae rerum? Adipisci et labore laborum quidem!

#### No Footer Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni suscipit. Dicta dolorem earum esse, fugiat harum minus neque nesciunt, quas reiciendis rem repudiandae rerum? Adipisci et labore laborum quidem!

###### Modal Sizes

#### Default modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni suscipit. Dicta dolorem earum esse, fugiat harum minus neque nesciunt, quas reiciendis rem repudiandae rerum? Adipisci et labore laborum quidem!

#### Small modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni suscipit. Dicta dolorem earum esse, fugiat harum minus neque nesciunt, quas reiciendis rem repudiandae rerum? Adipisci et labore laborum quidem!

#### Large modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur dignissimos minima nostrum omnis sapiente! Aut, culpa cum cupiditate, delectus dolor eos esse, harum id illo in maxime minima molestiae nostrum odio recusandae sunt voluptates? Autem esse ipsum libero saepe.

###### Modal Styles

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

#### Primary Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni suscipit. Dicta dolorem earum esse, fugiat harum minus neque nesciunt, quas reiciendis rem repudiandae rerum? Adipisci et labore laborum quidem!

#### Success Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni suscipit. Dicta dolorem earum esse, fugiat harum minus neque nesciunt, quas reiciendis rem repudiandae rerum? Adipisci et labore laborum quidem!

#### Info Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni suscipit. Dicta dolorem earum esse, fugiat harum minus neque nesciunt, quas reiciendis rem repudiandae rerum? Adipisci et labore laborum quidem!

#### Warning Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni suscipit. Dicta dolorem earum esse, fugiat harum minus neque nesciunt, quas reiciendis rem repudiandae rerum? Adipisci et labore laborum quidem!

#### Danger Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni suscipit. Dicta dolorem earum esse, fugiat harum minus neque nesciunt, quas reiciendis rem repudiandae rerum? Adipisci et labore laborum quidem!

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

### First slide caption

First slide description

### Second slide caption

Second slide description

### Third slide caption

Third slide description

Previous Next

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