Documentation v8.0.25

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>

Explore Metronic

Demo1

Demo2

Demo3

Demo4

Demo5

Demo6

Demo7

Demo8

Demo9

Demo10

demo
Coming soon

Demo11

Demo12

demo
Coming soon

Demo13

Demo14

demo
Coming soon

Demo15

demo
Coming soon

Demo16

demo
Coming soon

Demo17

demo
Coming soon

Demo18

demo
Coming soon

Demo19

demo
Coming soon

Demo20

demo
Coming soon