Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Typography

This is a paragraph.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed dia nonum. Epsum factorial non deposit quid pro quo hic escorol.

This is a lead paragraph `.lead`.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed dia nonum. Epsum factorial non deposit quid pro quo hic escorol.

This is an unordered list.

SSD Hard Drive
Central Processing Unit
LED Monitor
Graphics Card

This is an ordered list.

SSD Hard Drive
Central Processing Unit
LED Monitor
Graphics Card

Muted Text

.text-muted

Text Success

.text-success

Purple Text

.color-purple

Bootstrap Alerts

Wrap any text and an optional dismiss button in .alertand one of the four contextual classes: .alert-success, .alert-info, .alert-warning, .alert-danger, for basic alert messages.

Success!

Every thing seems to be ok!

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Best check yo self, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Theme Alerts

Wrap any text and an optional dismiss button in .alert .alert-themeand one of the four contextual classes: .alert-success, .alert-info, .alert-warning, .alert-danger, for basic alert messages.

Success!

Every thing seems to be ok!

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Best check yo self, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Tooltips

Popovers

Breadcrumbs

Bootstrap Breadcrumbs

Add the .breadcrumb class to your list for the default bootstrap breadcrumb.

Theme Breadcrumbs

Add the .breadcrumb .breadcrumb-theme class to your list for the themes breadcrumb. In addition, you have two additional sizes of small(add class and large

Small `.breadcrumb-sm`

Regular

Large `.breadcrumb-lg`

Theme Breadcrumb Colors

Add the .breadcrumb .breadcrumb-theme class to your list for the themes breadcrumb. In addition, you aslo have six additional alternative colors to choose from.

Blue `.breadcrumb-blue`

Orange `.breadcrumb-orange`

Red `.breadcrumb-red`

Green `.breadcrumb-green`

Purple `.breadcrumb-purple`

Pink `.breadcrumb-pink`

Progress Bars

Primary

60%

Info `.progress-bar-info`

60%

Success `.progress-bar-success`

60%

Warning `.progress-bar-warning`

60%

Danger `.progress-bar-danger`

60%

Light Green `.progress-bar-light-green`

60%

Light Orange `.progress-bar-light-orange`

60%

Light Red `.progress-bar-light-red`

60%

Purple `.progress-bar-purple`

60%

Light Purple `.progress-bar-light-purple`

60%

Pink `.progress-bar-pink`

60%

Light Pink `.progress-bar-light-pink`

60%

Additional Progress Bars

Extra Small Progress Bar `.progress-xs`

Small Progress Bar `.progress-sm`

60%

Normal Progress Bar

60%

Medium Progress Bar `.progress-md`

60%

Large Progress Bar `.progress-lg`

60%

Animated Striped Progress Bar `.progress-striped .active`

60%

Striped Progress Bar `.progress-striped`

60%

Striped Progress Bar `.progress-striped`

60%

Striped Progress Bar `.progress-striped`

60%

Stacked Progress Bar

Striped Stacked Progress Bar `.progress-striped`

Animated Striped Stacked Progress Bar `.progress-striped .active`

Labels

Default .label-default

Primary .label-primary

Success .label-success

Info .label-info

Warning .label-warning

Danger .label-danger

Light Green .label-light-green

Light Orange .label-light-orange

Light Red .label-light-red

Purple .label-purple

Light Purple .label-light-purple

Pink .label-pink

Light Pink .label-light-pink

Pager

Default

Aligned links

Optional disabled state

Pagination

Default Pagination

Disabled and Active states

Pagination Small `.pagination-sm`

Pagination Normal

Pagination Large `.pagination-lg`

List Group

List Group with Badge and Links

Cras justo odio 14 Dapibus ac facilisis in Morbi leo risus 14 Porta ac consectetur ac Vestibulum at eros

Inverse List Group `.list-group-inverse`

List group item heading

Morbi leo risus at eros leo risus at eros.

List group item heading

Morbi leo risus at eros leo risus at eros.

List group item heading

Morbi leo risus at eros leo risus at eros.

List group item heading

Morbi leo risus at eros leo risus at eros.