Logo

Documentation v1.0.6

  • Base
  • Separator Exclusive
Preview Upgrade to Pro

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

Sizes

Use .separator class 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 .separator class 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-dotted and .separator-dashed classes 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

Add .separator-content along 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>
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Download Jet HTML Free
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