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. Please read the official Bootstrap documentation for the full list of options.

Primary! A simple primary alert check it out!
Secondary Alert! This alert is not important, but it's beautiful.
Well done! You successfully read this important alert message.
Oh snap! Change a few things up and try submitting again.
Warning! Better check yourself, you're not looking too good.
Heads up! This alert needs your attention, but it's not super important.
Dark! A simple dark alert—check it out!
Light! A simple light alert—check it out!

Badges

Documentation and examples for badges, our small count and labeling component. Please read the official Bootstrap documentation for the full list of options.

Primary Secondary Success Danger Warning Info Light Dark

Jumbotron

Lightweight, flexible component for showcasing hero unit style content by using Bootstrap utilities.

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

List Group

List groups are a flexible and powerful component for displaying a series of content. Please read the official Bootstrap documentation for the full list of options.

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

Media Object

Media object is created by using Bootstrap utilities class and it is construct highly repetitive components like blog comments, tweets, and the like.

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

Progress

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. Please read the official Bootstrap documentation for the full list of options.

DEFAULT
50%
MULTIPLE BARS
33%
20%
20%
STRIPED
66%
ANIMATED
33%

Spinners

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. Please read the official Bootstrap documentation for the full list of options.

BORDER SPINNER
COLORS
SIZE
GROWING SPINNER
COLORS
SIZE
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.