General 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!
Loading example...

Badges

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

PrimarySecondarySuccessDangerWarningInfoLightDark
Loading example...

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

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.

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

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%
Loading example...

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

Placeholders

Use loading placeholders (skeleton loaders) for your components or pages to indicate something may still be loading. Please read the official Bootstrap documentation for the full list of options.

Loading example...

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. Please read the official Bootstrap documentation for the full list of options.

Default
Placement
Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
Loading example...
App Settings
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.

Header Fixed
Header Inverse
Sidebar Fixed
Gradient Enabled
RTL Enabled NEW
Admin Design (6)
Language Version (9)
Frontend Design (5)
DocumentationReset Storage & Cookies