Dividers

Horizontal dividers for separation your information blocks

Default

<hr>

Icon left

<hr class="fa-divider">
<i class="fa fa-diamond fa-divider-icon"></i>

Icon center

<div class="text-center">
  <hr class="fa-divider fa-divider-center">
  <i class="fa fa-diamond fa-divider-icon"></i>
</div>

Icon right

<div class="text-right">
  <hr class="fa-divider fa-divider-right">
  <i class="fa fa-diamond fa-divider-icon"></i>
</div>

Big icon

<hr class="fa-divider fa-divider-big-icon">
<i class="fa fa-diamond fa-divider-icon"></i>

Icon rounded

<hr class="fa-divider fa-divider-rounded">
<i class="fa fa-diamond fa-divider-icon"></i>

Icon square

<hr class="fa-divider fa-divider-square">
<i class="fa fa-diamond fa-divider-icon"></i>

Half left

<div class="">
  <hr class="fa-divider fa-divider-half">
  <i class="fa fa-diamond fa-divider-icon"></i>
</div>

Half center

<div class="text-center">
  <hr class="fa-divider fa-divider-half center">
  <i class="fa fa-diamond fa-divider-icon"></i>
</div>

Half right

<div class="text-right">
  <hr class="fa-divider fa-divider-half right">
  <i class="fa fa-diamond fa-divider-icon"></i>
</div>

Quarter

<hr class="fa-divider fa-divider-quarter">
<i class="fa fa-diamond fa-divider-icon"></i>

Text Left

<div class="text-divider">
  <hr class="fa-divider">
  <span class="average-heading-alt">Divider with Text</span>
</div>

Divider with Text

Text Center

<div class="text-divider text-center">
  <hr class="fa-divider">
  <span class="average-heading-alt">
    <span>Divider with Text</span>
  </span>
</div>

Divider with Text

Text Right

<div class="text-divider text-right">
  <hr class="fa-divider">
  <span class="average-heading-alt">
    <span>Divider with Text</span>
  </span>
</div>

Divider with Text

Narrow

(less margin on top and bottom)

<hr class="narrow">

⌃