• 5
  • avatar

Divider

Vertical Dividers

  
    <div className="app-divider-v solid"></div>
    <div className="app-divider-v dotted"></div>
    <div className="app-divider-v dashed"></div>
Horizontal

            <div className="app-divider-h solid"></div>
            <div className="app-divider-h dotted"></div>
            <div className="app-divider-h dashed"></div>
Divider with text & aligns

justify-content-start

justify-content-center

justify-content-end


 <div class="app-divider-v justify-content-start"><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>
Horizontal with text & aligns

Or

align-items-center

Or


 <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>
Color Options With Icon Buttons
Login With Social

Align Right

Choose from below option

Dark


      <div className="app-divider-v secondary justify-content-center"><span className="badge text-bg-secondary">Login With Social</span></div>
      <div className="app-divider-v success justify-content-end"><p className="text-success">Align Right</p></div>
      <div className="app-divider-v danger"><span className="badge text-bg-danger">Choose from below option</span></div>
      <div className="app-divider-v info justify-content-center gap-1">
<button type="button" className="btn btn-facebook icon-btn b-r-22">
  <i className="ti ti-brand-facebook text-white"></i>
</button>
<button type="button" className="btn btn-twitter icon-btn b-r-22">
  <i className="ti ti-brand-twitter text-white"></i>
</button>
<button type="button" className="btn btn-linkedin icon-btn b-r-22">
  <i className="ti ti-brand-linkedin text-white"></i>
</button></div>
      <div className="app-divider-v warning justify-content-end gap-1"></div>
      <div className="app-divider-v dark justify-content-center"><p>Dark</p></div>
Horizontal

  <div className="app-divider-h primary"></div>
      <div className="app-divider-h secondary"></div>
      <div className="app-divider-h success"></div>
      <div className="app-divider-h danger"></div>
      <div className="app-divider-h warning"></div>
      <div className="app-divider-h info"></div>
      <div className="app-divider-h light"></div>
      <div className="app-divider-h dark"></div>