Components Page

Alerts

View Code 
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

App Icons

App Icons with Title

aih1. Application Title

aih2. Application Title

aih3. Application Title

aih4. Application Title

aih4. Application Title

aih5. Application Title
View Code 
<h1>
  <span class="app-icon app-icon-black">ai</span>
  <span class="app-icon-title">h1. Application Title</span>
</h1>
<h2>
  <span class="app-icon app-icon-blue">ai</span>
  <span class="app-icon-title">h2. Application Title</span>
</h2>
<h3>
  <span class="app-icon app-icon-green">ai</span>
  <span class="app-icon-title">h3. Application Title</span>
</h3>
<h4>
  <span class="app-icon app-icon-orange">ai</span>
  <span class="app-icon-title">h4. Application Title</span>
</h4>
<h4>
    <span class="app-icon app-icon-red">ai</span>
    <span class="app-icon-title">h4. Application Title</span>
</h4>
<h5>
  <span class="app-icon app-icon-branded-black">ai<span class="caret"></span></span>
  <span class="app-icon-title">h5. Application Title</span>
</h5>

Default Icons

aiaiaiaiai
aiaiaiaiai
View Code 
<div>
  <span class="app-icon app-icon-black">ai</span>
  <span class="app-icon app-icon-blue">ai</span>
  <span class="app-icon app-icon-green">ai</span>
  <span class="app-icon app-icon-orange">ai</span>
  <span class="app-icon app-icon-red">ai</span>
</div>
<div>
  <span class="app-icon app-icon-branded-black">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-branded-blue">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-branded-green">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-branded-orange">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-branded-red">ai<span class="caret"></span></span>
</div>

Extra Large Icons

aiaiaiaiai
aiaiaiaiai
View Code 
<div>
  <span class="app-icon app-icon-xl app-icon-black">ai</span>
  <span class="app-icon app-icon-xl app-icon-blue">ai</span>
  <span class="app-icon app-icon-xl app-icon-green">ai</span>
  <span class="app-icon app-icon-xl app-icon-orange">ai</span>
  <span class="app-icon app-icon-xl app-icon-red">ai</span>
</div>
<div>
  <span class="app-icon app-icon-xl app-icon-branded-black">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-xl app-icon-branded-blue">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-xl app-icon-branded-green">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-xl app-icon-branded-orange">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-xl app-icon-branded-red">ai<span class="caret"></span></span>
</div>

Large Icons

aiaiaiaiai
aiaiaiaiai
View Code 
<div>
  <span class="app-icon app-icon-lg app-icon-black">ai</span>
  <span class="app-icon app-icon-lg app-icon-blue">ai</span>
  <span class="app-icon app-icon-lg app-icon-green">ai</span>
  <span class="app-icon app-icon-lg app-icon-orange">ai</span>
  <span class="app-icon app-icon-lg app-icon-red">ai</span>
</div>
<div>
  <span class="app-icon app-icon-lg app-icon-branded-black">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-lg app-icon-branded-blue">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-lg app-icon-branded-green">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-lg app-icon-branded-orange">ai<span class="caret"></span></span>
  <span class="app-icon app-icon-lg app-icon-branded-red">ai<span class="caret"></span></span>
</div>

With Breadcrumbs

aih1. Application Title

View Code 
<ul class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
   <li class="breadcrumb-item">
    <a href="#">Spaces</a>
  </li>
  <li class="breadcrumb-item active">
    My Application
  </li>
</ul>
<h1>
  <span class="app-icon app-icon-black">ai</span>
  <span class="app-icon-title">h1. Application Title</span>
</h1>

Badges

Blocks

Primary badge

Secondary badge

Success badge

Info badge

Warning badge
Danger badge
Brand badge
Extra badge
Light badge
Dark badge
View Code 
<h1 class="badge badge-primary badge-block">Primary badge</h1>
<h2 class="badge badge-secondary badge-block">Secondary badge</h2>
<h3 class="badge badge-success badge-block">Success badge</h3>
<h4 class="badge badge-info badge-block">Info badge</h4>
<h5 class="badge badge-warning badge-block">Warning badge</h5>
<h6 class="badge badge-danger badge-block">Danger badge</h6>
<div class="badge badge-brand badge-block">Brand badge</div>
<div class="badge badge-extra badge-block">Extra badge</div>
<div class="badge badge-light badge-block">Light badge</div>
<div class="badge badge-dark badge-block">Dark badge</div>

Contextual Variations

UnstyledPrimarySecondarySuccessInfoWarningDangerBrandExtraLightDark012345678910

View Code 
<p><span class="badge badge-unstyled">Unstyled</span>
<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-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-brand">Brand</span>
<span class="badge badge-extra">Extra</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-unstyled">0</span>
<span class="badge badge-primary">1</span>
<span class="badge badge-secondary">2</span>
<span class="badge badge-success">3</span>
<span class="badge badge-info">4</span>
<span class="badge badge-warning">5</span>
<span class="badge badge-danger">6</span>
<span class="badge badge-brand">7</span>
<span class="badge badge-extra">8</span>
<span class="badge badge-light">9</span>
<span class="badge badge-dark">10</span></p>

Default

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
View Code 
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
<button class="btn">
  Notifications <span class="badge badge-secondary">4</span>
</button>

PrimarySecondarySuccessDangerWarningInfoBrandExtraLightDark

View Code

Notifications

View Code 
<button class="btn">
  Notifications <span class="badge badge-secondary">4</span>
  <span class="sr-only">unread messages</span>
</button>

Removable badges

Unstyled Primary Secondary Success Info Warning Danger Brand Extra Light Dark

View Code 
<p><span class="badge badge-unstyled badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Unstyled</span>
<span class="badge badge-primary badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Primary</span>
<span class="badge badge-secondary badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Secondary</span>
<span class="badge badge-success badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Success</span>
<span class="badge badge-info badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Info</span>
<span class="badge badge-warning badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Warning</span>
<span class="badge badge-danger badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Danger</span>
<span class="badge badge-brand badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Brand</span>
<span class="badge badge-extra badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Extra</span>
<span class="badge badge-light badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Light</span>
<span class="badge badge-dark badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Dark</span></p>
View Code

Buttons

Default

View Code 
<p><button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-ghost">Ghost</button>
<button type="button" class="btn btn-link">Link</button></p>

Disabled

View Code 
<p><button type="button" disabled="disabled" class="btn btn-default">Default</button>
<button type="button" disabled="disabled" class="btn btn-primary">Primary</button>
<button type="button" disabled="disabled" class="btn btn-success">Success</button>
<button type="button" disabled="disabled" class="btn btn-info">Info</button>
<button type="button" disabled="disabled" class="btn btn-warning">Warning</button>
<button type="button" disabled="disabled" class="btn btn-danger">Danger</button>
<button type="button" disabled="disabled" class="btn btn-dark">Dark</button>
<button type="button" disabled="disabled" class="btn btn-ghost">Ghost</button>
<button type="button" disabled="disabled" class="btn btn-link">Link</button></p>

File Upload

Add files...Add files...Add files...Add files...Add files...Add files...Add files...Add files...Add files...
View Code 
  <span class="btn btn-default btn-file">
    <i class="icon icon-plus-circle"></i>
    <span>Add files...</span>
    <input type="file" name="files[]" multiple aria-label="upload files">
  </span>
  <span class="btn btn-primary btn-file">
    <i class="icon icon-plus-circle"></i>
    <span>Add files...</span>
    <input type="file" name="files[]" multiple aria-label="upload files">
  </span>
  <span class="btn btn-success btn-file">
    <i class="icon icon-plus-circle"></i>
    <span>Add files...</span>
    <input type="file" name="files[]" multiple aria-label="upload files">
  </span>
  <span class="btn btn-info btn-file">
    <i class="icon icon-plus-circle"></i>
    <span>Add files...</span>
    <input type="file" name="files[]" multiple aria-label="upload files">
  </span>
  <span class="btn btn-warning btn-file">
    <i class="icon icon-plus-circle"></i>
    <span>Add files...</span>
    <input type="file" name="files[]" multiple aria-label="upload files">
  </span>
  <span class="btn btn-danger btn-file">
    <i class="icon icon-plus-circle"></i>
    <span>Add files...</span>
    <input type="file" name="files[]" multiple aria-label="upload files">
  </span>
  <span class="btn btn-dark btn-file">
    <i class="icon icon-plus-circle"></i>
    <span>Add files...</span>
    <input type="file" name="files[]" multiple aria-label="upload files">
  </span>
  <span class="btn btn-ghost btn-file">
    <i class="icon icon-plus-circle"></i>
    <span>Add files...</span>
    <input type="file" name="files[]" multiple aria-label="upload files">
  </span>
  <span class="btn btn-link btn-file">
    <i class="icon icon-plus-circle"></i>
    <span>Add files...</span>
    <input type="file" name="files[]" multiple aria-label="upload files">
  </span>

Group

View Code 
<div class="btn-group">
  <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>

Outline

View Code 
<p><button type="button" class="btn btn-outline-default">Default</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button></p>

Cards

Alignment

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
View Code 
<div class="card card-body mb-3">
  <h4 class="card-title">Special title treatment</h4>
  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card card-body mb-3 text-center">
  <h4 class="card-title">Special title treatment</h4>
  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card card-body mb-3 text-right">
  <h4 class="card-title">Special title treatment</h4>
  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
</div>

Cards

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button
View Code 
<div class="card">
  <img class="card-img-top" data-src="holder.js/100px180?text=Image" height="180" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Collapsible

View Code 
<div class="card card-collapsible">
  <h5 class="card-header">
    <a class="collapsed card-collapsible-link" data-toggle="collapse" href="#exampleCollapse">
      View more data
    </a>
  </h5>
  <div id="exampleCollapse" class="collapse" aria-expanded="false">
    <div class="card-body">
      <p>Some extra data to view</p>
      <p>Even more data</p>
    </div>
  </div>
</div>

Content Types

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card linkAnother link
100px180

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Support card subtitle
Card image

Some quick example text to build on the card title and make up the bulk of the card's content.

Card linkAnother link

Card title

Support card subtitle
  • one
  • two
  • three
View Code 
<div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" data-src="holder.js/100px180?text=Image" height="180" alt="100px180">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <h6 class="card-subtitle text-muted">Support card subtitle</h6>
    </div>
    <img data-src="holder.js/100px180/?text=Image" height="180" alt="Card image">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
  <div class="card card-body">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle text-muted">Support card subtitle</h6>
    <ul class="card-body">
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
</div>
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago
View Code

Image Caps

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

View Code 
  <div class="card">
    <img class="card-img-top" data-src="holder.js/100px180?text=Image" height="180" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>

Sizes

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
View Code 
  <div class="row">
    <div class="col-sm-6">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Special title treatment</h3>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Special title treatment</h3>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>

Variants

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
View Code 
  <div class="card text-white bg-primary mb-3 text-center">
    <div class="card-body">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
      </blockquote>
    </div>
  </div>
  <div class="card text-white bg-success mb-3 text-center">
    <div class="card-body">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
      </blockquote>
    </div>
  </div>
  <div class="card text-white bg-info mb-3 text-center">
    <div class="card-body">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
      </blockquote>
    </div>
  </div>
  <div class="card text-dark bg-warning mb-3 text-center">
    <div class="card-body">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
      </blockquote>
    </div>
  </div>
  <div class="card text-white bg-danger mb-3 text-center">
    <div class="card-body">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
      </blockquote>
    </div>
  </div>
  <div class="card text-white bg-secondary mb-3 text-center">
    <div class="card-body">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
      </blockquote>
    </div>
  </div>
  <div class="card text-dark bg-light mb-3 text-center">
    <div class="card-body">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
      </blockquote>
    </div>
  </div>
  <div class="card text-white bg-dark mb-3 text-center">
    <div class="card-body">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
      </blockquote>
    </div>
  </div>

Colors

Standard

#d93d11
#2261b5
#007cc2
#4D4F53
#e8ebeb
#ffffff
View Code 
<div class="colors-container">
  <div class="row">
    <div class="col-sm-2">
      <div class="docs-color-item">
        <div class="docs-color-item-header" style="background-color:#d93d11;"></div>
        <span class="docs-color-item-footer">#d93d11</span>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="docs-color-item">
        <div class="docs-color-item-header" style="background-color:#2261b5;"></div>
        <span class="docs-color-item-footer">#2261b5</span>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="docs-color-item">
        <div class="docs-color-item-header" style="background-color:#007cc2;"></div>
        <span class="docs-color-item-footer">#007cc2</span>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="docs-color-item">
        <div class="docs-color-item-header" style="background-color:#4D4F53;"></div>
        <span class="docs-color-item-footer">#4D4F53</span>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="docs-color-item">
        <div class="docs-color-item-header" style="background-color:#e8ebeb;"></div>
        <span class="docs-color-item-footer">#e8ebeb</span>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="docs-color-item">
        <div class="docs-color-item-header" style="background-color:#ffffff;"></div>
        <span class="docs-color-item-footer">#ffffff</span>
      </div>
    </div>
  </div>
</div>

Status & Alerts

#136857
#385e7a
#e6c400
#a01708
View Code 
<div class="colors-container">
  <div class="row">
    <div class="col-sm-3">
      <div class="docs-color-item">
        <div class="docs-color-item-header alert-success"></div>
        <span class="docs-color-item-footer">#136857</span>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="docs-color-item">
        <div class="docs-color-item-header alert-info"></div>
        <span class="docs-color-item-footer">#385e7a</span>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="docs-color-item">
        <div class="docs-color-item-header alert-warning"></div>
        <span class="docs-color-item-footer">#e6c400</span>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="docs-color-item">
        <div class="docs-color-item-header alert-danger"></div>
        <span class="docs-color-item-footer">#a01708</span>
      </div>
    </div>
  </div>
</div>

Forms

Checkboxes

View Code 
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-label">Check this custom checkbox</span>
  </label>
  <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" disabled>
      <span class="custom-control-label">Disabled checkbox</span>
    </label>
  <label class="custom-control custom-checkbox disabled">
    <input type="checkbox" class="custom-control-input" disabled>
    <span class="custom-control-label">Disabled checkbox and cursor</span>
  </label>

Default

Request Information
View Code 
  <div class="card">
    <div class="card-body">
      <form>
        <h5 class="card-title-secondary">Request Information</h5>
        <div class="form-group">
          <label for="memberID">
            Member ID
            <span class="inline-help" data-toggle="tooltip" data-placement="top" title="" data-original-title="Lorem ipusm cornaer vel eu leo. cum soclies nasctuere abl ultriceis vehiclula et magins.">
              What's this
            </span>
          </label>
          <input type="text" class="form-control" id="memberID" placeholder="">
        </div>
        <div class="form-group">
          <label for="relationshipToSubscriber">
            Relationship to Subscriber
            <span class="inline-help" data-toggle="tooltip" data-placement="top" data-original-title="Lorem ipusm cornaer vel eu leo. cum soclies nasctuere abl ultriceis vehiclula et magins.">
              What's this
            </span>
          </label>
          <select class="custom-select custom-block" id="relationshipToSubscriber">
            <option>Select one</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
            <option>Option 5</option>
          </select>
        </div>
        <div class="form-group">
          <label for="datetimepicker7">
            Date of Birth
          </label>
          <input type="text" class="form-control" id="datetimepicker7" placeholder="mm/dd/yyyy">
        </div>
        <div class="form-group">
          <div class="row">
            <div class="col-sm-4">
              <label for="serviceQuantity">
                Service Quantity
              </label>
              <input type="text" id="serviceQuantity" class="form-control">
            </div>
            <div class="col-sm-8">
              <label for="serviceType">
                Service Type
              </label>
              <select class="custom-select custom-block" id="serviceType">
                <option>Select one</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
                <option>Option 5</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-controls">
          <input type="submit" class="btn btn-default" value="Cancel">
          <input type="submit" class="btn btn-default" value="Ok">
          <input type="submit" class="btn btn-default" value="Maybe">
          <input type="submit" class="btn btn-primary form-controls-right" value="Save">
        </div>
      </form>
    </div>
  </div>

Inline

View Code 
  <form class="form-inline">
    <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
    <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect">
      <option>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
        <input type="checkbox" class="custom-control-input">
        <span class="custom-control-label">Remember my preference</span>
    </label>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

Inline Help

View Code 
  <div class="form-group">
    <label for="text3">Label for text input <span class="inline-help" data-toggle="tooltip" data-placement="top" title="" data-original-title="Lorem ipusm cornaer vel eu leo. cum soclies nasctuere abl ultriceis vehiclula et magins.">What’s this?</span></label>
    <input type="text" class="form-control" id="text3" placeholder="Type what you want here">
  </div>

Optional

Contact Information

All fields required unless noted.

View Code 
<fieldset>
  <legend>Contact Information</legend>
  <p>All fields <strong>required</strong> unless noted.</p>
  <div class="row">
    <div class="col-md-5">
    <div class="form-group">
      <label for="firstName10">First Name</label>
      <input type="email" class="form-control" id="firstName10" placeholder="Text input">
    </div>
    <div class="form-group">
      <label for="lastName10">Last Name</label>
      <input type="email" class="form-control" id="lastName10" placeholder="Text input">
    </div>
    <div class="form-group">
      <label for="phonenNumber10">Phone <small>(Optional)</small></label>
      <input type="email" class="form-control" id="phonenNumber10" placeholder="Text input">
    </div>
    </div>
  </div>
</fieldset>

Radios

View Code 
  <label class="custom-control custom-radio">
    <input id="radio1" name="radio" type="radio" class="custom-control-input">
    <span class="custom-control-label">Toggle this custom radio</span>
  </label>
  <label class="custom-control custom-radio">
    <input id="radio2" name="radioDisabled" type="radio" class="custom-control-input" disabled>
    <span class="custom-control-label">Disabled Radio</span>
  </label>
  <label class="custom-control custom-radio disabled">
      <input id="radio3" name="radioDisabledAll" type="radio" class="custom-control-input" disabled>
      <span class="custom-control-label">Disabled Radio and cursor</span>
   </label>

Validation

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.
View Code 
  <div class="form-group has-danger">
    <label for="text5">Label for text input</label>
    <input type="text" class="form-control" id="text5" placeholder="has error">
    <p class="form-control-feedback">Example block-level help text here.</p>
    <small class="form-text text-muted">Example help text that remains unchanged.</small>
  </div>
  <div class="form-group has-success">
    <label for="text6">Label for text input</label>
    <input type="text" class="form-control" id="text6" placeholder="has success">
    <p class="form-control-feedback">Example block-level help text here.</p>
    <small class="form-text text-muted">Example help text that remains unchanged.</small>
  </div>
  <div class="form-group has-warning">
    <label for="text7">Label for text input</label>
    <input type="text" class="form-control" id="text7" placeholder="has warning">
    <p class="form-control-feedback">Example block-level help text here.</p>
    <small class="form-text text-muted">Example help text that remains unchanged.</small>
  </div>

List Groups

Rogers, Steve

US Army

Kent, Clark

Daily Planet

Banner, Bruce

Defense Department

Parker, Peter

The Daily Bugle

Wayne, Bruce

Wayne Industries

Quill, Peter

Universe

Stark, Tony

Stark Industries

Strange, Stephen

Sanctum Sanctorum

View Code 
<div class="list-group list-group-cards">
    <a class="list-group-item primary" href="#">
      <h4 class="list-group-item-heading">Rogers, Steve</h4>
      <p class="list-group-item-text">US Army</p>
    </a>
    <a class="list-group-item secondary" href="#">
      <h4 class="list-group-item-heading">Kent, Clark</h4>
      <p class="list-group-item-text">Daily Planet</p>
    </a>
    <a class="list-group-item success" href="#">
      <h4 class="list-group-item-heading">Banner, Bruce</h4>
      <p class="list-group-item-text">Defense Department</p>
    </a>
    <a class="list-group-item danger" href="#">
      <h4 class="list-group-item-heading">Parker, Peter</h4>
      <p class="list-group-item-text">The Daily Bugle</p>
    </a>
    <a class="list-group-item warning" href="#">
      <h4 class="list-group-item-heading">Wayne, Bruce</h4>
      <p class="list-group-item-text">Wayne Industries</p>
    </a>
    <a class="list-group-item info" href="#">
      <h4 class="list-group-item-heading">Quill, Peter</h4>
      <p class="list-group-item-text">Universe</p>
    </a>
    <a class="list-group-item light" href="#">
      <h4 class="list-group-item-heading">Stark, Tony</h4>
      <p class="list-group-item-text">Stark Industries</p>
    </a>
    <a class="list-group-item dark" href="#">
      <h4 class="list-group-item-heading">Strange, Stephen</h4>
      <p class="list-group-item-text">Sanctum Sanctorum</p>
    </a>
  </div>

Selectable

Rogers, Steve

US Army

Kent, Clark

Daily Planet

Banner, Bruce

Defense Department

Parker, Peter

The Daily Bugle

Wayne, Bruce

Wayne Industries

Quill, Peter

Universe

Stark, Tony

Stark Industries

Strange, Stephen

Sanctum Sanctorum

</>
View Code 
<div class="list-group list-group-cards list-group-selectable">
    <div class="list-group-item primary">
      <h4 class="list-group-item-heading">Rogers, Steve</h4>
      <p class="list-group-item-text">US Army</p>
    </div>
    <div class="list-group-item secondary">
      <h4 class="list-group-item-heading">Kent, Clark</h4>
      <p class="list-group-item-text">Daily Planet</p>
    </div>
    <div class="list-group-item success">
      <h4 class="list-group-item-heading">Banner, Bruce</h4>
      <p class="list-group-item-text">Defense Department</p>
    </div>
    <div class="list-group-item danger">
      <h4 class="list-group-item-heading">Parker, Peter</h4>
      <p class="list-group-item-text">The Daily Bugle</p>
    </div>
    <div class="list-group-item warning">
      <h4 class="list-group-item-heading">Wayne, Bruce</h4>
      <p class="list-group-item-text">Wayne Industries</p>
    </div>
    <div class="list-group-item info">
      <h4 class="list-group-item-heading">Quill, Peter</h4>
      <p class="list-group-item-text">Universe</p>
    </div>
    <div class="list-group-item light">
      <h4 class="list-group-item-heading">Stark, Tony</h4>
      <p class="list-group-item-text">Stark Industries</p>
    </div>
    <div class="list-group-item dark">
      <h4 class="list-group-item-heading">Strange, Stephen</h4>
      <p class="list-group-item-text">Sanctum Sanctorum</p>
    </>
  </div>

Home

Profile

Messages

Settings

View Code

Home

Profile

Messages

Settings

View Code
View Code
View Code
View Code
View Code
View Code

Home

Profile

Messages

Settings

View Code

Pagination

Default

Show
Showing batches 1-10 of 12
View Code 
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">&laquo; Prev</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Next &raquo;</a></li>
  </ul>
  <div class="pagination-container">
    <ul class="pagination">
      <li class="page-item disabled"><a class="page-link" href="#">&laquo; Prev</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">Next &raquo;</a></li>
    </ul>
    <div class="pagination-text">
      Show
    </div>
    <select class="custom-select" aria-label="Showing results">
      <option>10 results</option>
      <option>20 results</option>
      <option>30 results</option>
    </select>
    <div class="pagination-text">
      Showing batches 1-10 of 12
    </div>
  </div>

Unstyled

Show
Showing batches 1-10 of 12
View Code 
  <ul class="pagination pagination-unstyled">
	<li class="page-item disabled"><a class="page-link" href="#">&laquo; Prev</a></li>
	<li class="page-item active"><a class="page-link" href="#">1</a></li>
	<li class="page-item"><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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">Next &raquo;</a></li>
  </ul>
  <div class="pagination-container">
	<ul class="pagination pagination-unstyled">
	  <li class="page-item disabled"><a class="page-link" href="#">&laquo; Prev</a></li>
	  <li class="page-item active"><a class="page-link" href="#">1</a></li>
	  <li class="page-item"><a class="page-link" href="#">2</a></li>
	  <li class="page-item"><a class="page-link" href="#">Next &raquo;</a></li>
	</ul>
	<div class="pagination-text">
	  Show
	</div>
	<select class="custom-select" aria-label="Showing results">
	  <option>10 results</option>
	  <option>20 results</option>
	  <option>30 results</option>
	</select>
	<div class="pagination-text">
	  Showing batches 1-10 of 12
	</div>
  </div>

Progress Bars

Default

0% Complete

80% Complete

100% Complete

Processing

View Code 
  <p>0% Complete</p>
    <div class="progress">
      <span class="progress-bar bg-success" style="width: 0%;"></span>
    </div>
  <p>80% Complete</p>
    <div class="progress">
      <span class="progress-bar bg-success" style="width: 80%;"></span>
    </div>
  <p>100% Complete</p>
    <div class="progress progress-complete">
      <span class="progress-bar bg-success" style="width: 100%;"></span>
    </div>
  <p>Processing</p>
  <div class="progress">
    <span class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 50%;"></span>
  </div>

StepWizard

Bar

1First2Second with some long text3Third4Fourth with some really really really long text
5Fifth without link
6Sixth without link but clickable
Stacked
1First2Second with some long text3Third4Fourth with some really really really long text
5Fifth without link
6Sixth without link but clickable
View Code 
<div class="stepwizard stepwizard-bar">
  <div class="stepwizard-row">
    <a class="stepwizard-step complete" href="#step-1">
      <span class="stepwizard-badge">1</span>
      <span class="stepwizard-title">First</span>
    </a>
    <a class="stepwizard-step active" href="#step-2">
      <span class="stepwizard-badge">2</span>
      <span class="stepwizard-title">Second with some long text</span>
    </a>
    <a class="stepwizard-step" href="#step-3">
      <span class="stepwizard-badge">3</span>
      <span class="stepwizard-title">Third</span>
    </a>
    <a class="stepwizard-step disabled" href="#step-4">
      <span class="stepwizard-badge">4</span>
      <span class="stepwizard-title">Fourth with some really really really long text</span>
    </a>
    <div class="stepwizard-step">
      <span class="stepwizard-badge">5</span>
      <span class="stepwizard-title">Fifth without link</span>
    </div>
    <div class="stepwizard-step stepwizard-step-clickable">
      <span class="stepwizard-badge">6</span>
      <span class="stepwizard-title">Sixth without link but clickable</span>
    </div>
  </div>
</div>
<h5>Stacked</h5>
<div class="stepwizard stepwizard-bar stepwizard-stacked">
  <div class="stepwizard-row">
    <a class="stepwizard-step complete" href="#step-1">
      <span class="stepwizard-badge">1</span>
      <span class="stepwizard-title">First</span>
    </a>
    <a class="stepwizard-step active" href="#step-2">
      <span class="stepwizard-badge">2</span>
      <span class="stepwizard-title">Second with some long text</span>
    </a>
    <a class="stepwizard-step" href="#step-3">
      <span class="stepwizard-badge">3</span>
      <span class="stepwizard-title">Third</span>
    </a>
    <a class="stepwizard-step disabled" href="#step-4">
      <span class="stepwizard-badge">4</span>
      <span class="stepwizard-title">Fourth with some really really really long text</span>
    </a>
    <div class="stepwizard-step">
      <span class="stepwizard-badge">5</span>
      <span class="stepwizard-title">Fifth without link</span>
    </div>
    <div class="stepwizard-step stepwizard-step-clickable">
      <span class="stepwizard-badge">6</span>
      <span class="stepwizard-title">Sixth without link but clickable</span>
    </div>
  </div>
</div>

Default

1First2Second with some long text3Third4Fourth with some really really really long text
5Fifth without link
6Sixth without link but clickable
Stacked
1First2Second with some long text3Third4Fourth with some really really really long text
5Fifth without link
6Sixth without link but clickable
View Code 
<div class="stepwizard">
  <div class="stepwizard-row">
    <a class="stepwizard-step complete" href="#step-1">
      <span class="stepwizard-badge">1</span>
      <span class="stepwizard-title">First</span>
    </a>
    <a class="stepwizard-step active" href="#step-2">
      <span class="stepwizard-badge">2</span>
      <span class="stepwizard-title">Second with some long text</span>
    </a>
    <a class="stepwizard-step" href="#step-3">
      <span class="stepwizard-badge">3</span>
      <span class="stepwizard-title">Third</span>
    </a>
    <a class="stepwizard-step disabled" href="#step-4">
      <span class="stepwizard-badge">4</span>
      <span class="stepwizard-title">Fourth with some really really really long text</span>
    </a>
    <div class="stepwizard-step">
      <span class="stepwizard-badge">5</span>
      <span class="stepwizard-title">Fifth without link</span>
    </div>
    <div class="stepwizard-step stepwizard-step-clickable">
      <span class="stepwizard-badge">6</span>
      <span class="stepwizard-title">Sixth without link but clickable</span>
    </div>
  </div>
</div>
<h5>Stacked</h5>
<div class="stepwizard stepwizard-stacked">
  <div class="stepwizard-row">
    <a class="stepwizard-step complete" href="#step-1">
      <span class="stepwizard-badge">1</span>
      <span class="stepwizard-title">First</span>
    </a>
    <a class="stepwizard-step active" href="#step-2">
      <span class="stepwizard-badge">2</span>
      <span class="stepwizard-title">Second with some long text</span>
    </a>
    <a class="stepwizard-step" href="#step-3">
      <span class="stepwizard-badge">3</span>
      <span class="stepwizard-title">Third</span>
    </a>
    <a class="stepwizard-step disabled" href="#step-4">
      <span class="stepwizard-badge">4</span>
      <span class="stepwizard-title">Fourth with some really really really long text</span>
    </a>
    <div class="stepwizard-step">
      <span class="stepwizard-badge">5</span>
      <span class="stepwizard-title">Fifth without link</span>
    </div>
    <div class="stepwizard-step stepwizard-step-clickable">
      <span class="stepwizard-badge">6</span>
      <span class="stepwizard-title">Sixth without link but clickable</span>
    </div>
  </div>
</div>

Progress

FirstSecond with some long textThirdFourth with some really really really long text
Fifth without link
Sixth without link but clickable
Stacked
FirstSecond with some long textThirdFourth with some really really really long text
Fifth without link
Sixth without link but clickable
View Code 
<div class="stepwizard stepwizard-progress">
  <div class="stepwizard-row">
    <a class="stepwizard-step complete" href="#step-1">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">First</span>
    </a>
    <a class="stepwizard-step active" href="#step-2">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">Second with some long text</span>
    </a>
    <a class="stepwizard-step" href="#step-3">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">Third</span>
    </a>
    <a class="stepwizard-step disabled" href="#step-4">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">Fourth with some really really really long text</span>
    </a>
    <div class="stepwizard-step">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">Fifth without link</span>
    </div>
    <div class="stepwizard-step stepwizard-step-clickable">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">Sixth without link but clickable</span>
    </div>
  </div>
</div>
<h5>Stacked</h5>
<div class="stepwizard stepwizard-progress stepwizard-stacked">
  <div class="stepwizard-row">
    <a class="stepwizard-step complete" href="#step-1">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">First</span>
    </a>
    <a class="stepwizard-step active" href="#step-2">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">Second with some long text</span>
    </a>
    <a class="stepwizard-step" href="#step-3">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">Third</span>
    </a>
    <a class="stepwizard-step disabled" href="#step-4">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">Fourth with some really really really long text</span>
    </a>
    <div class="stepwizard-step">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">Fifth without link</span>
    </div>
    <div class="stepwizard-step stepwizard-step-clickable">
      <span class="stepwizard-badge"></span>
      <span class="stepwizard-title">Sixth without link but clickable</span>
    </div>
  </div>
</div>

Tables

Contextual

#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content
View Code 
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Column heading</th>
        <th>Column heading</th>
        <th>Column heading</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-active">
        <td>1</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="table-success">
        <td>3</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="table-info">
        <td>5</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="table-warning">
        <td>7</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="table-danger">
        <td>9</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
    </tbody>
  </table>

Default

Optional table caption.
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
View Code 
  <table class="table">
    <caption>Optional table caption.</caption>
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

Fixed

#HaikuLast NameUsername
1Haikus are easy; but sometimes they don't make sense; refrigeratorOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
View Code 
  <table class="table table-fixed">
    <thead>
    <tr>
      <th class="col-md-1">#</th>
      <th class="col-md-3">Haiku</th>
      <th class="col-md-2">Last Name</th>
      <th class="col-md-5">Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>1</td>
      <td class="text-truncate">Haikus are easy; but sometimes they don't make sense; refrigerator</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>

Hover

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
View Code 
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

Striped

#First NameLast NameHealth Plan
1LanceGutinCigna
2ElliottMuñozFlorida Blue
3KevinVigneaultHumana
4ToddMoyWellpoint
View Code 
  <table class="table table-striped">
    <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Health Plan</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>1</td>
      <td>Lance</td>
      <td>Gutin</td>
      <td>Cigna</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Elliott</td>
      <td>Muñoz</td>
      <td>Florida Blue</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Kevin</td>
      <td>Vigneault</td>
      <td>Humana</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Todd</td>
      <td>Moy</td>
      <td>Wellpoint</td>
    </tr>
    </tbody>
  </table>

Typography

Agreement

veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur

doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio

veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur

doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio

veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur

doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio

veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur

doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio

veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur

doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio

View Code 
<div class="agreement">
  <p>veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est  nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur</p>
  <p>doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio</p>
  <p>veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est  nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur</p>
  <p>doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio</p>
  <p>veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est  nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur</p>
  <p>doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio</p>
  <p>veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est  nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur</p>
  <p>doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio</p>
  <p>veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est  nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur</p>
  <p>doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio</p>
</div>

Default

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
View Code 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>

Disclaimers

I have fully read this agreement and understand that I am entering into a legally binding agreement and that my organization is bound by the terms and conditions contained therein. I attest and certify that I am the Primary Controlling Authority for the organization named herein and that I possess the necessary legal authority to bind this organization. I further attest and certify my organization's designation as a Covered Entity under HIPAA, as more fully described in 45 CFR § 160.103.
View Code 
<div class="disclaimer">
  I have fully read this agreement and understand that I am entering into a legally binding agreement and that my organization is bound by the terms and conditions contained therein. I attest and certify that I am the Primary Controlling Authority for the organization named herein and that I possess the necessary legal authority to bind this organization. I further attest and certify my organization's designation as a Covered Entity under HIPAA, as more fully described in 45 CFR § 160.103.
</div>

Disclaimers Unstyled

I have fully read this agreement and understand that I am entering into a legally binding agreement and that my organization is bound by the terms and conditions contained therein. I attest and certify that I am the Primary Controlling Authority for the organization named herein and that I possess the necessary legal authority to bind this organization. I further attest and certify my organization's designation as a Covered Entity under HIPAA, as more fully described in 45 CFR § 160.103.
View Code 
<div class="disclaimer-unstyled">
  I have fully read this agreement and understand that I am entering into a legally binding agreement and that my organization is bound by the terms and conditions contained therein. I attest and certify that I am the Primary Controlling Authority for the organization named herein and that I possess the necessary legal authority to bind this organization. I further attest and certify my organization's designation as a Covered Entity under HIPAA, as more fully described in 45 CFR § 160.103.
</div>

ar Authorization Results

View Code 
<h2 class="page-header page-header-brand">
  <div class="page-header-title">
      <span class="app-icon app-icon-black">ar</span> 
       Authorization Results
  </div>
  <div class="page-header-logo">
      <a href="http://www.example.com" class=" spaces-logo holderjs" aria-label="spaces logo"></a>
  </div>
</h2>

Headers

Header Text Section Header Link

View Code 
<h3 class="section-header">Header Text
  <small><a href="#" class="section-header-link">Section Header Link</a></small>
</h3>

Link to internal resource

Link to external resource

Link with small text

View Code

Subheader

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
View Code 
<h1 class="subheader">h1. Bootstrap heading</h1>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>
<h2 class="subheader">h2. Bootstrap heading</h2>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>
<h3 class="subheader">h3. Bootstrap heading</h3>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>
<h4 class="subheader">h4. Bootstrap heading</h4>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>
<h5 class="subheader">h5. Bootstrap heading</h5>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>
<h6 class="subheader">h6. Bootstrap heading</h6>
<hr class="docs-block-text"/>
<hr class="docs-block-text-small"/>
<hr class="docs-block-text-medium"/>

Utilities

Lowercase text

Uppercase text

Capitalized text

Truncated text on overflow

WrapTextWithoutBreakableCharacters

View Code 
<p class="text-lowercase">Lowercase text</p>
<p class="text-uppercase">Uppercase text</p>
<p class="text-capitalize">Capitalized text</p>
<p class="text-truncate" style="width:100px">Truncated text on overflow</p>
<p class="text-break" style="width:100px">WrapTextWithoutBreakableCharacters</p>