Dashboard

Avatar

Sizing

Avatar With Status

Shape

Group

CF

Alerts

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

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

Warning!There was a problem with your network connection.

Error!A problemhas been occurred while submitting your data.

Success!Your messagehas been sent successfully.

Note!Please read the commentscarefully.

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

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

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.

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

Dropdowns within Buttons

Split button 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

Coloured text

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

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

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