Divider | Alina - Premium Admin Template

Default

                                
</div>
<div class="card-body">
    <div class="app-divider-h text-primary"></div>
    <div class="app-divider-h dotted text-secondary"></div>
    <div class="app-divider-h dashed text-info"></div>
    <pre id="defaultDivider" class="collapse app-scroll">
</pre>

Vertical

                                       
 <div class="card-body divider-body">
    <div class="d-flex h-100">
        <div class="app-divider-v text-success"></div>
        <div class="app-divider-v dotted text-danger"></div>
        <div class="app-divider-v dashed text-warning"></div>
    </div>
</div>

Divider with text & aligns

                                
  <div class="app-divider-h2">
    <span class="pe-0"><i class="ti ti-circle-dotted f-s-20 align-middle text-primary"></i></span>
    <span class="pe-0"> <i class="ti ti-circle-dotted f-s-20 align-middle text-primary"></i></span>
    <span class="pe-1"> <i class="ti ti-circle-dotted f-s-20 align-middle text-primary"></i></span>
</div>

<div class="app-divider-h2 justify-content-center align-items-center">
    <span class="p-0 ps-1"><i class="ti ti-circle-dotted f-s-20 align-middle text-danger"></i></span>
    <span class="p-0"> <i class="ti ti-circle-dotted f-s-20 align-middle text-danger"></i></span>
    <span class="ps-0 pe-1"><i class="ti ti-circle-dotted f-s-20 align-middle text-danger"></i></span>
</div>

<div class="app-divider-h2 justify-content-end">
    <span class="ps-1"><i class="ti ti-circle-dotted f-s-20 align-middle text-success"></i></span>
    <span class="ps-0"> <i class="ti ti-circle-dotted f-s-20 align-middle text-success"></i></span>
    <span class="ps-0"> <i class="ti ti-circle-dotted f-s-20 align-middle text-success"></i></span>
</div>

Vertical with Circle

                                
  <div class="card-body divider-body d-flex">
    <div class="app-divider-v2 d-flex flex-column">
        <span class="pb-0"><i class="ti ti-circle-dotted f-s-20 align-middle text-primary"></i></span>
        <span class="pb-0"> <i class="ti ti-circle-dotted f-s-20 align-middle text-primary"></i></span>
        <span class="pb-1"> <i class="ti ti-circle-dotted f-s-20 align-middle text-primary"></i></span>
    </div>

    <div class="app-divider-v2 align-items-center flex-column justify-content-center">
        <span class="p-0"><i class="ti ti-circle-dotted f-s-20 align-middle text-dark"></i></span>
        <span class="p-0"> <i class="ti ti-circle-dotted f-s-20 align-middle text-dark"></i></span>
        <span class="pt-0 pb-1"> <i class="ti ti-circle-dotted f-s-20 align-middle text-dark"></i></span>
    </div>

    <div class="app-divider-v2 align-items-end flex-column-reverse">
        <span class="pt-0"><i class="ti ti-circle-dotted f-s-20 align-middle text-info"></i></span>
        <span class="pt-0"> <i class="ti ti-circle-dotted f-s-20 align-middle text-info"></i></span>
        <span class="pt-1"> <i class="ti ti-circle-dotted f-s-20 align-middle text-info"></i></span>
    </div>
</div>

Color Options With icon button and so on.

Align Left

Align Right

Choose from below option

                                
 <div class="app-divider-h dashed primary">
    <p class="text-primary">Align Left</p>
</div>

<div class="app-divider-h dashed secondary justify-content-center">
    <span class="badge bg-gradient-secondary rounded">Login With Social</span>
</div>

<div class="app-divider-h dashed success justify-content-end">
    <p class="text-success">Align Right</p>
</div>

<div class="app-divider-h dashed danger">
    <span class="badge bg-gradient-primary rounded">Choose from below option</span>
</div>

<div class="app-divider-h dashed info justify-content-center gap-1">
    <button class="btn btn-facebook icon-btn b-r-10" type="button"><i class="ti ti-brand-facebook text-white"></i></button>
    <button class="btn btn-twitter icon-btn b-r-10" type="button"><i class="ti ti-brand-twitter text-white"></i></button>
    <button class="btn btn-linkedin icon-btn b-r-10" type="button"><i class="ti ti-brand-linkedin text-white"></i></button>
</div>

<div class="app-divider-h dashed warning justify-content-end gap-1">
</div>

<div class="app-divider-h dashed primary justify-content-center">
    <i class="ti ti-brand-4chan f-s-25 text-primary"></i>
</div>

Vertical

                                
   <div class="card-body divider-body d-flex">
    <div class="app-divider-v primary"></div>
    <div class="app-divider-v secondary"></div>
    <div class="app-divider-v success"></div>
    <div class="app-divider-v danger"></div>
    <div class="app-divider-v warning"></div>
    <div class="app-divider-v info"></div>
    <div class="app-divider-v light"></div>
    <div class="app-divider-v dark"></div>
</div>