# Documentation v8.0.38

Preview Downloads Purchase

# 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>

### 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
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### 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