Documentation v8.1.5

Preview Downloads 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-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>


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
Video Tutorials
From guides and how-tos, to live demos and code examples to get started right away.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now