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