# Labels

<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-light">Light</span>
<span class="badge badge-dark">Dark</span>

# Alerts

<div class="alert alert-success" role="alert"><b>Well done!</b> You successfully read this important alert message. </div>
<div class="alert alert-info" role="alert"><b>Heads up!</b> This alert needs your attention, but it's not super important. </div>
<div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
<div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>

# Cards

<div class="card">
  <div class="card-header">Card header without title</div>
  <div class="card-body">
    Card body content
  </div>
</div>

<div class="card bg-light">
  <div class="card-header">Card header without title</div>
  <div class="card-body">
    Card body content
  </div>
</div>

<div class="card bg-secondary text-white">
  <div class="card-header">Card header without title</div>
  <div class="card-body">
    Card body content
  </div>
</div>

<div class="card bg-dark text-white">
  <div class="card-header">Card header without title</div>
  <div class="card-body">
    Card body content
  </div>
</div>

<div class="card bg-primary text-white">
  <div class="card-header">Card header without title</div>
  <div class="card-body">
    Card body content
  </div>
</div>

<div class="card bg-success text-white">
  <div class="card-header">Card header without title</div>
  <div class="card-body">
    Card body content
  </div>
</div>

<div class="card bg-info text-white">
  <div class="card-header">Card header without title</div>
  <div class="card-body">
    Card body content
  </div>
</div>

<div class="card bg-warning text-white">
  <div class="card-header">Card header without title</div>
  <div class="card-body">
    Card body content
  </div>
</div>

<div class="card bg-danger text-white">
  <div class="card-header">Card header without title</div>
  <div class="card-body">
    Card body content
  </div>
</div>

# Wells

## Default well

<div class="well">Look, I'm in a well! </div>

## Optional classes

<div class="well well-lg">Look, I'm in a well! </div>

<div class="well well-sm">Look, I'm in a well! </div>

# Typography

## Lead body copy

<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

## Marked text

You can use the mark tag to <mark>highlight</mark> text.

## Small text

<small>This line of text is meant to be treated as fine print.</small>

## Alignment classes

<div class="card">
  <div class="card-body">
    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
    <p class="text-justify">Justified text.</p>
    <p class="text-nowrap">No wrap text.</p>
  </div>
</div>

## Transformation classes

<div class="card">
  <div class="card-body">
    <p class="text-lowercase">Lowercased text.</p>
    <p class="text-uppercase">Uppercased text.</p>
    <p class="text-capitalize">Capitalized text.</p>
  </div>
</div>


# Helper classes

## Contextual colors

<div class="card">
  <div class="card-body">
    <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="text-secondary">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
    <p class="text-dark">Ut vel lorem aliquet, rhoncus libero at, condimentum mi. Fusce pellentesque quam nec magna maximus porta.</p>
    <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

## Contextual backgrounds

<div class="card">
  <div class="card-body">
    <p class="bg-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="bg-secondary text-white">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
    <p class="bg-dark text-white">Ut vel lorem aliquet, rhoncus libero at, condimentum mi.</p>
    <p class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <p class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</p>
    <p class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>