Documentation v8.0.36

Preview Downloads Purchase

Overview

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

Basic Example

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-dark my-10"></div>
<div class="separator separator-dashed border-dark my-10"></div>

Centered Content Example

Add .separator-contentalong with any other separator classes and include any text/icon within the separator wrapper:
Separator
Title
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-bolder">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">
        ...
    </span>
</div>
<div class="separator separator-dotted separator-content border-success my-15">
    <i class="bi bi-check-square text-success fs-2"></i>
</div>
<div class="separator separator-content border-danger my-15">
    <i class="fas fa-bomb text-danger fs-2"></i>
</div>

Explore

Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 939
Custom License
Reach us for custom license offers.
Buy Now
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 & Videos
From guides and video tutorials, to live demos and code examples to get started.
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.
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