Loading...

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!

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.

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

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.

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
Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
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)
Documentation Reset Storage & Cookies