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!
<div class="alert alert-success alert-dismissable fade show p-3">
  <button type="button" class="close" data-dismiss="alert">
    <span>×</span>
  </button>
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr />
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

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
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Jumbotron

Lightweight, flexible component for showcasing hero unit style content. Please read the official Bootstrap documentation for the full list of options.

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
<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

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.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

Media Object

Media object construct highly repetitive components like blog comments, tweets, and the like. Please read the official Bootstrap documentation for the full list of options.

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.
<div class="media mt-3">
  <a class="mr-3" href="#">
    <img src="https://via.placeholder.com/128x128/c9d2e3/212837" width="64px" class="rounded" alt="" />
  </a>
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    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.
  </div>
</div>

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%
<!-- default -->
<div class="progress">
  <div class="progress-bar" style="width: 50%">50%</div>
</div>

<!-- multiple bars -->
<div class="progress">
  <div class="progress-bar" style="width: 33%">33%</div>
  <div class="progress-bar bg-warning" style="width: 20%">20%</div>
  <div class="progress-bar bg-danger" style="width: 20%">20%</div>
</div>

<!-- striped -->
<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 50%">50%</div>
</div>

<!-- striped & animated -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 33%">33%</div>
</div>

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
<!-- border spinner -->
<div class="spinner-border"></div>

<!-- grow spinner -->
<div class="spinner-grow"></div>

<!-- colors -->
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-light"></div>
<div class="spinner-grow text-dark"></div>

<!-- size -->
<div class="spinner-grow spinner-grow-sm"></div>