Components

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

components-btn-group Buttons group

Group of buttons

<div class="btn-group [modifier class]">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Large `.btn-group-lg`

Small `.btn-group-sm`

Extra small `.btn-group-xs`

components-nav Navs

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

<ul class="nav [modifier class]" role="tablist">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Simple navigation `.nav-tabs`

Pill navigation `.nav-pills`

Stacked navigation `.nav-tabs.nav-stacked`

Pill and stacked navigation `.nav-pills.nav-stacked`

Justified navigation `.nav-tabs.nav-justified`

Pill and justified navigation `.nav-pills.nav-justified`

Indicate the current page's location within a navigational hierarchy.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

components-pagination Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

<ul class="pagination [modifier class]">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">Next</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

Large `.pagination-lg`

Small `.pagination-sm`

components-label Labels

Add any of the below mentioned modifier classes to change the appearance of a label.

Example heading New

<h5>Example heading <span class="label [modifier class]">New</span></h5>

Default `.label-default`

Example heading New

Primary `.label-primary`

Example heading New

Success `.label-success`

Example heading New

Info `.label-info`

Example heading New

Warning `.label-warning`

Example heading New

Danger `.label-danger`

Example heading New

components-badge Badges

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

Inbox 42

<a href="#">Inbox <span class="badge">42</span></a>

components-jumbotron Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div class="jumbotron">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
  </div>
</div>

components-alert Alerts

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.