Components

Avatar

Sizing

User Image
User Image
User Image
User Image
User Image
User Image

Avatar With Status

User Image
User Image
User Image

Shape

User Image
User Image

Group

User Image
User Image
User Image
CF

Alerts

Breadcrumbs

Buttons

Default Button

Button Sizes

Button Groups



Rounded Button

use .btn-rounded in class .btn class to get Rounded button

use .btn-rounded in class .btn-outline-* class to get Rounded Outline button

Outline Buttons

Use .btn-outline-* class for outline buttons.

Normal
Active
Disabled

Cards

Card Image
Card with image and links

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

Card link Another link
Card Image
Card with image and button

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

Go somewhere
Card Image
Card with image and list
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card with links

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

Card link Another link
Card with button

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

Go somewhere
Card with list
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
This is my header
Special title treatment

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

This is my footer
Card with tabs

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

Go somewhere
Card with tabs

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

Go somewhere
Card with tabs

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

Go somewhere
Card with pills

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

Go somewhere
Card with pills

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

Go somewhere
Card with pills

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

Go somewhere

Dropdowns

Dropdowns within Text

Action Another action

Dropdowns within Buttons

Action Another action
Separated link
Action Another action
Separated link
Action Another action
Separated link
Action Another action
Separated link
Action Another action
Separated link
Action Another action
Separated link

Split button dropdowns

Action Another action
Separated link
Action Another action
Separated link
Action Another action
Separated link
Action Another action
Separated link
Action Another action
Separated link
Action Another action
Separated link

Modals

Modal components

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

Basic Modal

Varying modal content

Sizes modal

Pagination

Progress

Large Progress Bars

Default Progress Bars

Medium Progress Bars

Small Progress Bars

Extra Small Progress Bars

Tabs

Basic tabs

Tab content 1
Tab content 2
Tab content 3

Basic justified tabs

Tab content 1
Tab content 2
Tab content 3
Tab content 4

Top line tabs

Tab content 1
Tab content 2
Tab content 3

Top line justified

Tab content 1
Tab content 2
Tab content 3

Bottom line tabs

Tab content 1
Tab content 2
Tab content 3

Bottom line justified

Tab content 1
Tab content 2
Tab content 3

Solid tabs

Tab content 1
Tab content 2
Tab content 3

Solid justified

Tab content 1
Tab content 2
Tab content 3

Solid Rounded

Tab content 1
Tab content 2
Tab content 3

Rounded justified

Tab content 1
Tab content 2
Tab content 3

Typography

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Text element

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

This is in monospace

Coloured Link

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

Coloured text

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Muted link

White link

Bullet Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Bullet Lists

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem