Bootstrap page header description goes here...

PAGINATIONS & SIZES

Add .pagination-lg or .pagination-sm for additional sizes.

PAGER

You can align each link to the sides by adding .previous or .next.

LABELS

Add any of the below mentioned modifier classes to change the appearance of a label.

Default Primary Success Info Warning Danger Purple Pink Yellow Inverse

BADGES

Easily highlight new or unread items by adding .badge

Inbox 42

BADGES IN NAV PILLS

Built-in styles are included for placing badges in active states in pill navigations.

JUMBOTRON

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

CARDS

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

Card Title

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Card subtitle

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

Button Button

Featured

Card title

Card subtitle

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

Card link Another link
2 days ago
Card image

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

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes for basic alert messages.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Inverse Alert! This alert is not important, but it's beautiful.

ALERTS OUTLINE

Add .alert-outline to show the alert in outline mode.

Well done! You successfully read this important alert message.

PROGRSS BAR

Provide up-to-date feedback on the progress of a workflow or action

60%
40%
20%
60%
48%
35%
25%
15%
0%

PROGRESS BAR SIZING

Add .progress-sm or .progress-xs to change the progress bar size.

MEDIA OBJECT

The default media displays a media object (images, video, audio) to the left or right of a content block.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.

LIST GROUP

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Active Link Item Normal Link Item 14Item with Badge
Without link
Disabled Link Item

WELLS

Use the well as a simple effect on an element to give it an inset effect. Use .well-lg or .well-sm to control the well sizes.

Look, I'm in a well!
Look, I'm in a large well!
Look, I'm in a small well!

RESPONSIVE EMBED

Use .embed-responsive-16by9 or .embed-responsive-4by3 to adjust the ratio size. Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements.

Reset Setting