Bootstrap page header description goes here...

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.
Muted Alert! This alert is not important, but it's beautiful.

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 Black Info Primary Purple Indigo
Success Teal Warning Yellow Danger Pink

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.

List Group

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

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.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

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. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Media heading

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

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

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.

Color Theme
Gradient Theme
Fixed Sidebar
Light Sidebar
Fixed Header
Dark Header