Documentation v1.1.0

Preview Purchase


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


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>


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>


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>


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:
Long separator title label
<div class="separator separator-content my-15">Separator</div>

<div class="separator separator-dotted separator-content border-dark my-15"><span class="h1">Title</span></div>

<div class="separator separator-content border-dark my-15"><span class="w-250px fw-bold">Long separator title label</span></div>

<div class="separator separator-dashed separator-content border-primary my-15">
    <span class="svg-icon svg-icon-1 svg-icon-primary">

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

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

Support at

Join our developers community to find answer to your question and help others. FAQs
Get Support
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