Dividers

Dividers Shortcodes

Sometimes you need to separate the content visually, here are the options:

Default


Spacements




Styles





Icons

Colors

Icon Sizes

Icon Positions


Sizes

HTML Shortcodes

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<h4 class="mt-lg mb-none">Sizes</h4>
<div class="divider divider-style-4 divider-solid divider-xs divider-icon-sm taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-4 divider-solid divider-sm taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-4 divider-solid divider-icon-lg">
    <em class="fa fa-chevron-down"></em>
</div>

Animations

Small Lines

Customer Support


Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support


Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Colors







Spacements




Sizes




HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="row">
    <div class="col-md-4">
        <h4 class="mt-lg">Colors</h4>
        <hr class="invisible" />
        <div class="divider divider-small">
            <hr />
        </div>
        <div class="divider divider-primary divider-small">
            <hr />
        </div>
        <div class="divider divider-secondary divider-small">
            <hr />
        </div>
        <div class="divider divider-tertiary divider-small">
            <hr />
        </div>
        <div class="divider divider-quaternary divider-small">
            <hr />
        </div>
        <div class="divider divider-light divider-small">
            <hr />
        </div>
    </div>
    <div class="col-md-4">
        <h4 class="mt-lg">Spacements</h4>
        <hr class="invisible" />
        <div class="divider divider-small">
            <hr />
        </div>
        <div class="divider divider-small tall">
            <hr />
        </div>
        <div class="divider divider-small taller">
            <hr />
        </div>
    </div>
    <div class="col-md-4">
        <h4 class="mt-lg">Sizes</h4>
        <hr class="invisible" />
        <div class="divider divider-small divider-small-sm">
            <hr />
        </div>
        <div class="divider divider-small">
            <hr />
        </div>
        <div class="divider divider-small divider-small-lg">
            <hr />
        </div>
    </div>
</div>

Newsletter

Keep up on our always evolving product features and technology. Enter your e-mail and subscribe to our newsletter.

About Our Company

Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu nam sapien stibulum ridiculus pellentesque eros!

Get in touch

  • Address: 1234 Street, United States

  • Phone: (123) 456-7890

  • Email: mail@example.com