Components

Badge

Primary Secondary Success Info Warning Danger Light Dark

Link

Primary Secondary Success Info Warning Danger Light Dark

Autosizing

Primary Secondary Success Info Warning Danger Light Dark

Button

Outline
Small
Large
Group

Dropdown

Header
Action Something else here
Separated link

Nav and tabs

Default
Tabs

Navbar

Form

We'll never share your email with anyone else.

Pagination

Breadcrumb

List-group

  1. Subheading
    Cras justo odio
    14
  2. Subheading
    Cras justo odio
    14
  3. Subheading
    Cras justo odio
    14
  4. Subheading
    Cras justo odio
    14
  5. Subheading
    Cras justo odio
    14
  6. Subheading
    Cras justo odio
    14
  7. Subheading
    Cras justo odio
    14
  8. Subheading
    Cras justo odio
    14
  9. Subheading
    Cras justo odio
    14

Card

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Card link Another link
...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Alerts

This is a "Primary" alert with a link.
This is a "Secondary" alert with a link.
This is a "Success" alert with a link.
This is a "Info" alert with a link.
This is a "Warning" alert with a link.
This is a "Danger" alert with a link.
This is a "Light" alert with a link.
This is a "Dark" alert with a link.

Modal

Modal title

This is a paragraph. Ambitioni dedisse scripsisse iudicaretur. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Unam incolunt Belgae, aliam Aquitani, tertiam. Integer legentibus erat a ante historiarum dapibus. Phasellus laoreet lorem vel dolor tempus vehicula.

Utilities & Typography

Color 1
Color 2
Color 3
Color 4
Color 5
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
White
100
200
300
400
500
600
700
800
900
Black
Color 1
Color 2
Color 3
Color 4
Color 5
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
White
100
200
300
400
500
600
700
800
900
Black

Shadow small

(shadow-sm)

Shadow medium

(shadow)

Shadow large

(shadow-lg)

Border radius none

(rounded-0)

Border radius small

(rounded-1)

Border radius medium

(rounded-2)

Border radius large

(rounded-3)

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Headings 1

Headings 2

Headings 3

Headings 4

Headings 5
Headings 6

Lead text

Paragraph with bold, muted and italic texts

Link