separator
Overview
Separator is a custom component to used to device page blocks with space and visual line.
Basic
Use .separator class to place a separator with border color and add vertical space with margin spacing classes as shown below:
Some text goes here
Other text goes here
html
<div class="separator my-10"></div>Sizes
Use .separator class in combination with Bootstrap Border Width classes to change separator border width:
html
<div class="separator my-10"></div>
<div class="separator border-2 my-10"></div>
<div class="separator border-3 my-10"></div>
<div class="separator border-4 my-10"></div>
<div class="separator border-5 my-10"></div>Colors
Use .separator class in combination with Bootstrap Border Color classes to change separator's border color:
html
<div class="separator border-light my-10"></div>
<div class="separator border-primary my-10"></div>
<div class="separator border-secondary my-10"></div>
<div class="separator border-success my-10"></div>
<div class="separator border-info my-10"></div>
<div class="separator border-warning my-10"></div>
<div class="separator border-danger my-10"></div>
<div class="separator border-dark my-10"></div>Styles
Add .separator-dotted and .separator-dashed classes to change a separator's border style:
html
<div class="separator separator-dotted border-success my-10"></div>
<div class="separator separator-dashed border-primary my-10"></div>Centered Content
Add .separator-content along with any other separator classes and include any text/icon within the separator wrapper:
Separator
Title
Long separator title label
html
<!--begin::Example-->
<div class="separator separator-content my-15">Separator</div>
<!--end::Example-->
<!--begin::Example-->
<div class="separator separator-dotted separator-content border-dark my-15"><span class="h1">Title</span></div>
<!--end::Example-->
<!--begin::Example-->
<div class="separator separator-content border-dark my-15"><span class="w-250px fw-bold">Long separator title label</span></div>
<!--end::Example-->
<!--begin::Example-->
<div class="separator separator-dashed separator-content border-primary my-15">
<i class="ki-duotone ki-abstract-19 fs-1 text-primary"><span class="path1"></span><span class="path2"></span></i>
</div>
<!--end::Example-->
<!--begin::Example-->
<div class="separator separator-dotted separator-content border-success my-15">
<i class="ki-duotone ki-check-square fs-2 text-success"><span class="path1"></span><span class="path2"></span></i>
</div>
<!--end::Example-->
<!--begin::Example-->
<div class="separator separator-content border-danger my-15">
<i class="ki-duotone ki-chart-pie-4 fs-2 text-danger"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
</div>
<!--end::Example-->