Logo

Documentation v1.0.0

  • 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 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>
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
User Management App
Calendar App
Chat App
Customers App
Upgrade to Ceres HTML Pro
Download Ceres HTML Free