Components

Progress | Accordion | Badges, pills | Cards | Counter bar | Disabled background | Dropdowns | Tooltips | Alerts | Modals | Error pages | Tables

Progress

Progress wizard / progress bars

Headers

Progress wizard

  1. Item one
  2. Item two
  3. Item three

Progress bars

Extra small

Small

Normal

Large

Text inside the progress bars:

Almost done! 80%

Accordion / collapse

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Badges / pills

Controlled by global variables

Examples

Badges

Note badge badge-info

Note badge badge-primary

Note badge badge-secondary

Note badge badge-success

Note badge badge-warning

Note badge badge-danger

Note badge badge-light

Note badge badge-dark

Pills

Note badge badge-pill badge-info

Note badge badge-pill badge-primary

Note badge badge-pill badge-secondary

Note badge badge-pill badge-success

Note badge badge-pill badge-warning

Note badge badge-pill badge-danger

Note badge badge-pill badge-light

Note badge badge-pill badge-dark

Cards

Border colors

Dark card

I'm dark

This is some text in the proper card-text class.

Naked card

Card header

I am a naked card where all borders and backgrounds have been removed.

All the formatting choices

Card header title
Card title
Card subtitle

Text properly formatted using the .card-text CSS class. Looks great doesn’t it? Yes, it certainly does.

Card link Another link
Card footer text

Counterbar / statsbar

A bar containing counters. Digits, sparklines, tiny charts, AmCharts, images, or similar statistics. Note: translate aria-lable

Example

65days

Avg. time to hire

78

Active projects

634

Hires

34

Active ads

34

Active projects

543value

Demo counting

Disabled background

Example

Table example

Normal table row
Table row with .stripesB
Normal table row

h1 class .stripesB

Dropdown

Example
Action Another action Something else here

Tooltip

Example

Alerts & toasters

Examples

Alerts

Toasters / snackbar

Error page

Example
...

Title

Description

Link 1 Link 2

Modals

Examples

Tables

Example
Otto
First Second Third Handle
1 Mark mdo
2 Link Thornton fat
3 Larry the Bird twitter

v1.0.841-rev-f8d5cfe+f8d5cfe75d5a52f58b13d21aa1ee045f0808d96d