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-roundedin class .btnclass to get Rounded button


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

Outline Buttons

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

Normal
Active
Disabled
Progress Button

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.

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

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

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

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
Notifications