Dividers

.bg-* classes can be used on <hr> element. Click here to see the list of background colors.

<hr class="bg-black-09">
<hr class="bg-black-05">
<hr class="bg-black-03">
<hr class="bg-black-01">

Width

The width can be set to 10px, 20px, 30px, 40px, 50px, 60px or 70px.

<div class="divider-width-10px">
  <hr class="bg-black-05">
</div>
<div class="divider-width-20px">
  <hr class="bg-black-05">
</div>
<div class="divider-width-30px">
  <hr class="bg-black-05">
</div>
<div class="divider-width-40px">
  <hr class="bg-black-05">
</div>
<div class="divider-width-50px">
  <hr class="bg-black-05">
</div>
<div class="divider-width-60px">
  <hr class="bg-black-05">
</div>
<div class="divider-width-70px">
  <hr class="bg-black-05">
</div>

Height

The height can be set to 1px, 2px or 3px.

<div class="divider-width-50px">
  <hr class="bg-black-09">
</div>
<div class="divider-width-50px divider-height-2px">
  <hr class="bg-black-09">
</div>
<div class="divider-width-50px divider-height-3px">
  <hr class="bg-black-09">
</div>

Divider - Dots

Each <span> element appears as a dot. And .bg-* classes also can be used.

<div class="divider-dots divider-dots-sm">
  <span class="bg-dark"></span>
  <span class="bg-dark"></span>
  <span class="bg-dark"></span>
</div>
<div class="divider-dots">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="divider-dots divider-dots-lg">
  <span class="bg-dark"></span>
  <span class="bg-dark"></span>
  <span class="bg-dark"></span>
</div>

Divider - ZigZag

<div class="divider-zigzag divider-zigzag-sm">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="divider-zigzag">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="divider-zigzag divider-zigzag-lg">
  <span></span>
  <span></span>
  <span></span>
</div>

ZigZag Colors

<div class="divider-zigzag divider-zigzag-color-black">
  <span></span><span></span><span></span>
</div>
<div class="divider-zigzag divider-zigzag-color-black-09">
  <span></span><span></span><span></span>
</div>
<div class="divider-zigzag divider-zigzag-color-black-08">
  <span></span><span></span><span></span>
</div>
<div class="divider-zigzag divider-zigzag-color-black-07">
  <span></span><span></span><span></span>
</div>
<div class="divider-zigzag divider-zigzag-color-black-06">
  <span></span><span></span><span></span>
</div>
<div class="divider-zigzag divider-zigzag-color-black-05">
  <span></span><span></span><span></span>
</div>
<div class="divider-zigzag divider-zigzag-color-black-04">
  <span></span><span></span><span></span>
</div>
<div class="divider-zigzag divider-zigzag-color-black-03">
  <span></span><span></span><span></span>
</div>
<div class="divider-zigzag divider-zigzag-color-black-02">
  <span></span><span></span><span></span>
</div>
<div class="divider-zigzag divider-zigzag-color-black-01">
  <span></span><span></span><span></span>
</div>