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

THUMBNAILS

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Thumbnail label

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.

Button Button

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.

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.