Dividers

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-4">
      <h4>Small - Left</h4>
      <hr class="hr-small hr-left">
      <h4>Small - Left Color</h4>
      <hr class="hr-small hr-left hr-color">
    </div>
    <div class="col-sm-4 col-md-4 text-center">
      <h4>Small</h4>
      <hr class="hr-small">
      <h4>Small - Color</h4>
      <hr class="hr-small hr-color">
    </div>
    <div class="col-sm-4 col-md-4 text-right">
      <h4>Small - Right</h4>
      <hr class="hr-small hr-right">
      <h4>Small - Right Color</h4>
      <hr class="hr-small hr-right hr-color">
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center">
      <h4>Default</h4>
      <hr>
      <h4>Default - Color</h4>
      <hr class="hr-color">
      <h4>Full Width</h4>
      <div class="hr-full"><hr></div>
      <h4>Full Width - Color</h4>
      <div class="hr-full">
        <hr class="hr-color">
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center">
      <h4>Gradient</h4>
      <hr class="hr-gradient">
      <h4>Gradient - Color</h4>
      <hr class="hr-gradient hr-color">
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center">
      <h4>Icons</h4>
      <!-- default -->
      <div class="divider-icon"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
      <!-- primary -->
      <div class="divider-icon divider-primary"><i class="fa fa-home" aria-hidden="true"></i></div>
      <!-- success -->
      <div class="divider-icon divider-success"><i class="fa fa-circle" aria-hidden="true"></i></div>
      <!-- info -->
      <div class="divider-icon divider-info"><i class="fa fa-leaf" aria-hidden="true"></i></div>
      <!-- warning -->
      <div class="divider-icon divider-warning"><i class="fa fa-stop" aria-hidden="true"></i></div>
      <!-- danger -->
      <div class="divider-icon divider-danger"><i class="fa fa-heart" aria-hidden="true"></i></div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 text-center">
      <h4>Circle Small</h4>
      <div class="section-header">
        <!-- Divider Circle Small -->
        <h2 class="divider-circle-small">Awesome Features</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
    <div class="col-md-6 col-sm-6 text-center">
      <h4>Square Small</h4>
      <div class="section-header">
        <!-- Divider Square Small -->
        <h2 class="divider-square-small">Awesome Features</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
    <div class="col-md-12 col-sm-12 text-center">
      <h4>Icon Small</h4>
      <div class="section-header">
        <h2>Awesome Features</h2>
        <!-- Divider Icon Small -->
        <div class="divider-icon-small"><i class="icon-strategy icon-xs"></i></div>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div><!-- /.row -->
</div>