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>

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Please read the official Bootstrap documentation for the full list of options.

<ol class="breadcrumb p-3 bg-light rounded">
  <li class="breadcrumb-item"><a href="#">HOME</a></li>
  <li class="breadcrumb-item"><a href="#">LIBRARY</a></li>
  <li class="breadcrumb-item active">DATA</li>
</ol>

Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel. Please read the official Bootstrap documentation for the full list of options.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExample" data-slide-to="1"></li>
    <li data-target="#carouselExample" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/728x400/c9d2e3/212837" class="d-block w-100" alt="" />
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    ...
  </div>
  <a class="carousel-control-prev" href="#carouselExample" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

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.

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

<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" alt="" width="64" class="rounded" />
  </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>

Navs

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style. Please read the official Bootstrap documentation for the full list of options.

BASE NAV

VERTICAL NAV

<!-- default nav -->
<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

<!-- vertical nav -->
<nav class="nav flex-column">
  ...
</nav>

Narbar

Includes support for branding, navigation, and more, including support for collapse plugin. Please read the official Bootstrap documentation for the full list of options.

<!-- navbar-light -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLight">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarLight">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
    	<input class="form-control mr-sm-2" type="search" placeholder="Search" />
    	<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<!-- navbar-dark -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  ...
</nav>

Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages. Please read the official Bootstrap documentation for the full list of options.

<ul class="pagination mb-0">
  <li class="page-item disabled"><a class="page-link">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

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%

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>

Notifications

Bootstrap page header description goes here...

Alerts

Badges

Breadcrumb

Carousel

First slide label

Second slide label

Third slide label

Jumbotron

Hello, world!

List Group

Media Object

Media heading

Media heading

Navs

Narbar

Pagination

Progress

Spinners