Documentation v8.0.28

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

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.28

Overview

Basic Example

Sizes

Colors

Styles

Explore Metronic

Metronic Licenses

Metronic Demos

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.28

No result found

Overview

Basic Example

Sizes

Colors

Styles

Explore Metronic

Metronic Licenses

Metronic Demos