## General Elements

Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit amet vestibulum mi. Morbi lobortis pulvinar quam.

## Overview

Nam pulvinar interdum turpis a mattis. Etiam augue leo, mollis a massa sagittis, egestas pretium risus. Aliquam auctor nibh mauris, at fringilla elit lobortis sodales. Praesent volutpat felis et placerat elementum.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Mauris bibendum massa ut porttitor congue.
- Morbi condimentum magna eget facilisis accumsan.
- Proin euismod eros nec libero efficitur, a dapibus mauris condimentum.

### Buttons

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

##### Buttons

#### Basic Buttons

Primary Brand Secondary Success Danger Warning Info Light Dark

#### Outline Buttons

Primary Brand Secondary Success Danger Warning Info Light Dark

#### Rounded Buttons

Primary Brand Secondary Success Danger Warning Info Light Dark

#### Buttons Sizes

Large button Default button Small button XSmall button

#### Block Level Buttons

Block level button Block level button

#### Active State

Primary Brand Secondary Success Danger Warning Info Light Dark

#### Radio Buttons

Active Radio Radio

### Color

Similar to the contextual text color classes, easily set the background of an element to any contextual class.

##### Color

#### Background Color

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white

#### Color

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

#### Borders

### Alerts

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

##### Alerts Examples

#### Basic Alerts

This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a info alert—check it out!
This is a light alert—check it out!
This is a dark alert—check it out!

#### Link Alerts

This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a info alert—check it out!
This is a light alert—check it out!
This is a dark alert—check it out!

#### Additional Content

#### Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

#### Dismissing

Holy guacamole! You should check in on some of those fields below. ×

### Badges

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

##### Badges Examples

#### Default Badges

Primary Brand Secondary Success Danger Warning Info Light Dark

#### Contextual Variations

Primary Brand Secondary Success Danger Warning Info Light Dark

#### Pill Badges

Primary Brand Secondary Success Danger Warning Info Light Dark

#### Link Badges

Primary Brand Secondary Success Danger Warning Info Light Dark

#### Dot Badges

Primary Brand Secondary Success Danger Warning Info Light Dark

#### Notification Badges

Notifications 4

### Tooltips & Popover

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

##### Tooltips & Popovers

#### Tooltip

#### Popovers

#### Four Directions

### Modals

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

##### Examples

#### Live Demo

Launch demo modal

##### Modal title

×

Woohoo, You are readng this text in a modal! Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

### Paginations

Examples for showing pagination to indicate a series of related content exists across multiple pages.

##### Pagination

#### Default Pagination

#### Sizing

#### Working with icon

##### Images

##### Progress Bars

65%

##### Progress sm

##### Progress md

##### Progress lg

##### Progress xl

##### Basic Preloader

##### Preloader States