Divider

Default
<div class="card">
    <div class="card-header">
        <h5>Default</h5>
    </div>
    <div class="card-body">
        <div class="app-divider-v"></div>
        <div class="app-divider-v dotted"></div>
        <div class="app-divider-v dashed"></div>
    </div>
</div>
Horizontal
<div class="card h-100">
    <div class="card-header">
        <h5>Horizontal</h5>
    </div>
    <div class="card-body divider-body">
        <div class="d-flex h-100">
            <div class="app-divider-h"></div>
            <div class="app-divider-h dotted"></div>
            <div class="app-divider-h dashed"></div>
        </div>
    </div>
</div>
Divider With Text & Aligns

justify-content-start

justify-content-center

justify-content-end

<div class="card">
    <div class="card-header">
        <h5>Divider with text & aligns</h5>
    </div>
    <div class="card-body">
        <div class="app-divider-v">
            <p>justify-content-start</p>
        </div>
        <div class="app-divider-v justify-content-center">
            <p>justify-content-center</p>
        </div>
        <div class="app-divider-v justify-content-end">
            <p>justify-content-end</p>
        </div>
    </div>
</div>
Horizontal

Or

align-items-center

Or

<div class="card h-100">
    <div class="card-header">
        <h5>Horizontal</h5>
    </div>
    <div class="card-body divider-body d-flex">
        <div class="app-divider-h">
            <p>Or</p>
        </div>
        <div class="app-divider-h align-items-center">
            <p>align-items-center</p>
        </div>
        <div class="app-divider-h align-items-end">
            <p>Or</p>
        </div>
    </div>
</div>
Color Options With Icon Button And so on..

Align Left

Login With Social

Align Right

Choose from below option

Dark

<div class="card">
    <div class="card-header">
        <h5>Color Options With icon button and so on..</h5>
    </div>
    <div class="card-body">
        <div class="app-divider-v primary">
            <p class="text-primary">Align Left</p>
        </div>
        <div class="app-divider-v secondary justify-content-center">
            <span class="badge text-bg-secondary">Login With Social</span>
        </div>
        <div class="app-divider-v success justify-content-end">
            <p class="text-success">Align Right</p>
        </div>
        <div class="app-divider-v danger">
            <span class="badge text-bg-danger">Choose from below option</span>
        </div>
        <div class="app-divider-v info justify-content-center gap-1">
            <button type="button" class="btn btn-facebook icon-btn b-r-22">
                <i class="ti ti-brand-facebook text-white"></i>
            </button>
            <button type="button" class="btn btn-twitter icon-btn b-r-22">
                <i class="ti ti-brand-twitter text-white"></i>
            </button>
            <button type="button" class="btn btn-linkedin icon-btn b-r-22">
                <i class="ti ti-brand-linkedin text-white"></i>
            </button>
        </div>
        <div class="app-divider-v warning justify-content-end gap-1">
            
        </div>
        
        <div class="app-divider-v dark justify-content-center">
            <p>Dark</p>
        </div>
    </div>
</div>
Horizontal
<div class="card h-100">
    <div class="card-header">
        <h5>Horizontal</h5>
    </div>
    <div class="card-body divider-body d-flex">
        <div class="app-divider-h primary"></div>
        <div class="app-divider-h secondary"></div>
        <div class="app-divider-h success"></div>
        <div class="app-divider-h danger"></div>
        <div class="app-divider-h warning"></div>
        <div class="app-divider-h info"></div>
        <div class="app-divider-h light"></div>
        <div class="app-divider-h dark"></div>
    </div>
</div>
Admin Customizer

it's time to style according to your choice ..!

Sidebar option
    • Vertical
    • Horizontal
    • Dark
Layout option
    • LTR
    • RTL
    • Box
Color Hint
Text size
  • sm
  • md
  • lg
Buy Now
SupportDocument