Divider
<> show code
<hr class="my-4">
<hr class="divider-dotted brd-gray my-4">
<hr class="divider-dashed brd-gray my-4">
<hr class="divider-solid-dbl brd-gray my-4">
<hr class="divider-dotted-dbl brd-gray my-4">
<hr class="divider-dashed-dbl brd-gray my-4">
<hr class="divider-gradient my-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis totam, laudantium officia praesentium expedita omnis unde tempora beatae, modi, sequi quis. Est quas corporis nobis aperiam cumque, minima, libero rem itaque quo vitae odit deserunt cupiditate fugit ipsum, nam quis suscipit tempora recusandae blanditiis porro incidunt maxime soluta. Voluptas, rem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptate voluptatum a fuga, inventore, velit doloremque illum repudiandae, eaque laudantium distinctio aliquid quis rem voluptas in excepturi. Voluptates quam possimus nostrum, cum aspernatur, odit nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptate voluptatum a fuga, inventore, velit doloremque illum repudiandae, eaque laudantium distinctio aliquid quis rem voluptas in excepturi. Voluptates quam possimus nostrum, cum aspernatur, odit nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptate voluptatum a fuga, inventore, velit doloremque illum repudiandae, eaque laudantium distinctio aliquid quis rem voluptas in excepturi. Voluptates quam possimus nostrum, cum aspernatur, odit nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptate voluptatum a fuga, inventore, velit doloremque illum repudiandae, eaque laudantium distinctio aliquid quis rem voluptas in excepturi. Voluptates quam possimus nostrum, cum aspernatur, odit nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptate voluptatum a fuga, inventore, velit doloremque illum repudiandae, eaque laudantium distinctio aliquid quis rem voluptas in excepturi. Voluptates quam possimus nostrum, cum aspernatur, odit nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptate voluptatum a fuga, inventore, velit doloremque illum repudiandae, eaque laudantium distinctio aliquid quis rem voluptas in excepturi. Voluptates quam possimus nostrum, cum aspernatur, odit nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptate voluptatum a fuga, inventore, velit doloremque illum repudiandae, eaque laudantium distinctio aliquid quis rem voluptas in excepturi. Voluptates quam possimus nostrum, cum aspernatur, odit nihil.
Divider Width
<> show code
<hr class="w25 my-4">
<hr class="w50 my-4">
<hr class="w75 my-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis totam, laudantium officia praesentium expedita omnis unde tempora beatae, modi, sequi quis. Est quas corporis nobis aperiam cumque, minima, libero rem itaque quo vitae odit deserunt cupiditate fugit ipsum, nam quis suscipit tempora recusandae blanditiis porro incidunt maxime soluta. Voluptas, rem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptate voluptatum a fuga, inventore, velit doloremque illum repudiandae, eaque laudantium distinctio aliquid quis rem voluptas in excepturi. Voluptates quam possimus nostrum, cum aspernatur, odit nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptate voluptatum a fuga, inventore, velit doloremque illum repudiandae, eaque laudantium distinctio aliquid quis rem voluptas in excepturi. Voluptates quam possimus nostrum, cum aspernatur, odit nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptate voluptatum a fuga, inventore, velit doloremque illum repudiandae, eaque laudantium distinctio aliquid quis rem voluptas in excepturi. Voluptates quam possimus nostrum, cum aspernatur, odit nihil.
Icon Divider
<> show code
<div class="divider border-solid divider-center brd-gray my-5">
<i class="fa fa-circle divider-icon bg-white "></i>
</div>
<!-- left align -->
<div class="divider border-solid brd-gray my-5">
<i class="fa fa-circle divider-icon bg-white "></i>
</div>
<!-- Right align -->
<div class="divider border-solid divider-right brd-gray my-5">
<i class="fa fa-circle divider-icon bg-white "></i>
</div>
<div class="divider divider-center divider-gradient divider-gradient-gray w50 mx-auto my-5">
<i class="fa fa-circle divider-icon bg-white text-primary"></i>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi omnis, magni eos! Quis eos deleniti aperiam voluptatibus vel nemo commodi, repellendus harum esse quidem accusamus reprehenderit deserunt ducimus, doloribus, sunt!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi omnis, magni eos! Quis eos deleniti aperiam voluptatibus vel nemo commodi, repellendus harum esse quidem accusamus reprehenderit deserunt ducimus, doloribus, sunt!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi omnis, magni eos! Quis eos deleniti aperiam voluptatibus vel nemo commodi, repellendus harum esse quidem accusamus reprehenderit deserunt ducimus, doloribus, sunt!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi omnis, magni eos! Quis eos deleniti aperiam voluptatibus vel nemo commodi, repellendus harum esse quidem accusamus reprehenderit deserunt ducimus, doloribus, sunt!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi omnis, magni eos! Quis eos deleniti aperiam voluptatibus vel nemo commodi, repellendus harum esse quidem accusamus reprehenderit deserunt ducimus, doloribus, sunt!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ipsum quia, reiciendis tenetur rerum! Consequuntur error quas ex doloribus modi veritatis quam possimus molestiae nesciunt, odio quasi rerum, perferendis rem!