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>