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