جداکننده‌ها (Dividers) - Axelit

جداکننده (Divider)

جداکننده‌های عمودی


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

افقی


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

جداکننده با متن و ترازبندی

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>

افقی با متن و ترازبندی

یا

تراز عمودی مرکز

یا


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

افقی


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

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

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

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