Documentation v1.1.0

Preview Purchase

Overview

Separator is a custom component to used to device page blocks with space and visual line.

Basic

Use .separatorclass 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
<div class="separator my-10"></div>

Sizes

Use .separatorclass in combination with Bootstrap Border Width  classes to change separator border width:
<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 .separatorclass in combination with Bootstrap Border Color  classes to change separator's border color:
<div class="separator border-white my-10"></div>

<div class="separator border-primary my-10"></div>

<div class="separator border-light 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-dottedand .separator-dashedclasses to change a separator's border style:
<div class="separator separator-dotted border-success my-10"></div>

<div class="separator separator-dashed border-primary my-10"></div>

Centered Content

Add .separator-contentalong with any other separator classes and include any text/icon within the separator wrapper:
Separator
Title
Long separator title label
<!--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">
    <span class="svg-icon svg-icon-1 svg-icon-primary">
        ...
    </span>
</div>
<!--end::Example-->

<!--begin::Example-->
<div class="separator separator-dotted separator-content border-success my-15">
    <i class="bi bi-check-square text-success fs-2"></i>
</div>
<!--end::Example-->

<!--begin::Example-->
<div class="separator separator-content border-danger my-15">
    <i class="fas fa-bomb text-danger fs-2"></i>
</div>
<!--end::Example-->
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now