Cheatsheet
Your Ultimate Cheatsheet
-
primarybadge text-bg-primary
<span class="badge text-bg-primary">Primary</span> -
secondarybadge text-bg-secondary
<span class="badge text-bg-secondary">Secondary</span> -
successbadge text-bg-success
<span class="badge text-bg-success">Success</span> -
dangerbadge text-bg-danger
<span class="badge text-bg-danger">Danger</span> -
warningbadge text-bg-warning
<span class="badge text-bg-warning">Warning</span> -
infobadge text-bg-info
<span class="badge text-bg-info">Info</span> -
lightbadge text-bg-light
<span class="badge text-bg-light">Light</span> -
darkbadge text-bg-dark
<span class="badge text-bg-dark">Dark</span> -
badge text-outline-primarybadge text-outline-primary
<span class="badge text-outline-primary">Primary</span> -
badge text-outline-secondarybadge text-outline-secondary
<span class="badge text-outline-secondary">Secondary</span> -
badge text-outline-successbadge text-outline-success
<span class="badge text-outline-success">Success</span> -
badge text-outline-dangerbadge text-outline-danger
<span class="badge text-outline-danger">Danger</span> -
badge text-outline-warningbadge text-outline-warning
<span class="badge text-outline-warning">Warning</span> -
badge text-outline-infobadge text-outline-info
<span class="badge text-outline-info">Info</span> -
badge text-outline-darkbadge text-outline-dark
<span class="badge text-outline-dark">Dark</span> -
badge text-light-primarybadge text-light-primary
<span class="badge text-light-primary">Primary</span> -
badge text-light-secondarybadge text-light-secondary
<span class="badge text-light-secondary">Secondary</span> -
badge text-light-successbadge text-light-success
<span class="badge text-light-success">Success</span> -
badge text-light-dangerbadge text-light-danger
<span class="badge text-light-danger">Danger</span> -
badge text-light-warningbadge text-light-warning
<span class="badge text-light-warning">Warning</span> -
badge text-light-infobadge text-light-info
<span class="badge text-light-info">Info</span> -
badge text-light-lightbadge text-light-light
<span class="badge text-light-light">Info</span> -
badge text-light-darkbadge text-light-dark
<span class="badge text-light-dark">Dark</span>
-
alert-primaryalert alert-primary
<div class="alert alert-primary" role="alert"> Simple primary alert -check it out </div> -
alert-secondaryalert alert-secondary
<div class="alert alert-secondary" role="alert"> Simple secondary alert -check it out </div> -
alert-successalert alert-success
<div class="alert alert-success" role="alert"> Simple success alert -check it out </div> -
alert-dangeralert alert-danger
<div class="alert alert-danger" role="alert"> Simple danger alert -check it out </div> -
alert-warningalert alert-warning
<div class="alert alert-warning " role="alert"> Simple warning alert -check it out </div> -
alert-infoalert alert-info
<div class="alert alert-info " role="alert"> Simple info alert -check it out </div> -
alert-lightalert alert-light
<div class="alert alert-light " role="alert"> Simple light alert -check it out </div> -
alert-darkalert alert-dark
<div class="alert alert-dark " role="alert"> Simple dark alert -check it out </div> -
alert-outline-primaryalert alert-outline-primary
<div class="alert alert-outline-primary" role="alert"> outline primary alert -check it out </div> -
alert-outline-secondaryalert alert-outline-secondary
<div class="alert alert-outline-secondary" role="alert"> outline secondary alert -check it out </div> -
alert-outline-successalert alert-outline-success
<div class="alert alert-outline-success" role="alert"> outline success alert -check it out </div> -
alert-outline-dangeralert alert-outline-danger
<div class="alert alert-outline-danger" role="alert"> outline danger alert -check it out </div> -
alert-outline-warningalert alert-outline-warning
<div class="alert alert-outline-warning" role="alert"> outline warning alert -check it out </div> -
alert-outline-infoalert alert-outline-info
<div class="alert alert-outline-info" role="alert"> outline info alert -check it out </div> -
alert-outline-lightalert alert-outline-light
<div class="alert alert-outline-light" role="alert"> outline light alert -check it out </div> -
alert-outline-darkalert alert-outline-dark
<div class="alert alert-outline-dark" role="alert"> outline dark alert -check it out </div> -
alert-light-primaryalert alert-light-primary
<div class="alert alert-light-primary" role="alert"> light primary alert -check it out </div> -
alert-light-secondaryalert alert-light-secondary
<div class="alert alert-light-secondary" role="alert"> light secondary alert -check it out </div> -
alert-light-successalert alert-light-success
<div class="alert alert-light-success" role="alert"> light success alert -check it out </div> -
alert-light-dangeralert alert-light-danger
<div class="alert alert-light-danger" role="alert"> light danger alert -check it out </div> -
alert-light-warningalert alert-light-warning
<div class="alert alert-light-warning" role="alert"> light warning alert -check it out </div> -
alert-light-infoalert alert-light-info
<div class="alert alert-light-info" role="alert"> light info alert -check it out </div> -
alert-light-lightalert alert-light-light
<div class="alert alert-light-light" role="alert"> light light alert -check it out </div> -
alert-light-darkalert alert-light-dark
<div class="alert alert-light-dark" role="alert"> light dark alert -check it out </div> -
alert alert-light-border-primaryalert alert-light-border-primary
<div class="alert alert-light-border-primary" role="alert"> Light-border-primary alert -check it out </div> -
alert alert-light-border-secondaryalert alert-light-border-secondary
<div class="alert alert-light-border-secondary" role="alert"> Light-border-secondary alert -check it out </div> -
alert alert-light-border-successalert alert-light-border-success
<div class="alert alert-light-border-success" role="alert"> Light-border-success alert -check it out </div> -
alert alert-light-border-dangeralert alert-light-border-danger
<div class="alert alert-light-border-danger" role="alert"> Light-border-danger alert -check it out </div> -
alert alert-light-border-warningalert alert-light-border-warning
<div class="alert alert-light-border-warning" role="alert"> Light-border-warning alert -check it out </div> -
alert alert-light-border-infoalert alert-light-border-info
<div class="alert alert-light-border-info" role="alert"> Light-border-info alert -check it out </div> -
alert alert-light-border-lightalert alert-light-border-light
<div class="alert alert-light-border-light" role="alert"> Light-border-light alert -check it out </div> -
alert alert-light-border-darkalert alert-light-border-dark
<div class="alert alert-light-border-dark" role="alert"> Light-border-dark alert -check it out </div> -
alert alert-border-primaryalert alert-border-primary
<div class="alert alert-border-primary" role="alert"> Alert with left slide border - check out! </div> -
alert alert-border-secondaryalert alert-border-secondary
<div class="alert alert-border-secondary" role="alert"> Alert with left slide border - check out! </div> -
alert alert-border-successalert alert-border-success
<div class="alert alert-border-success" role="alert"> Alert with left slide border - check out! </div> -
alert alert-border-dangeralert alert-border-danger
<div class="alert alert-border-danger" role="alert"> Alert with left slide border - check out! </div> -
alert alert-border-warningalert alert-border-warning
<div class="alert alert-border-warning" role="alert"> Alert with left slide border - check out! </div> -
alert alert-border-infoalert alert-border-info
<div class="alert alert-border-info" role="alert"> Alert with left slide border - check out! </div> -
alert alert-border-lightalert alert-border-light
<div class="alert alert-border-light" role="alert"> Alert with left slide border - check out! </div> -
alert alert-border-darkalert alert-border-dark
<div class="alert alert-border-dark" role="alert"> Alert with left slide border - check out! </div> -
alert alert-label alert-label-primaryalert alert-label alert-label-primary
<div class="alert alert-label alert-label-primary" role="alert"> <p class="mb-0"> <i class="ti ti-download label-icon label-icon-primary"></i> Alert with lable icons - check out! </p> <div> -
alert alert-label alert-label-secondaryalert alert-label alert-label-secondary
<div class="alert alert-label alert-label-secondary" role="alert"> <p class="mb-0"> <i class="ti ti-download label-icon label-icon-secondary"></i> Alert with lable icons - check out! </p> <div> -
alert alert-label alert-label-successalert alert-label alert-label-success
<div class="alert alert-label alert-label-success" role="alert"> <p class="mb-0"> <i class="ti ti-download label-icon label-icon-success"></i> Alert with lable icons - check out! </p> <div> -
alert alert-label alert-label-dangeralert alert-label alert-label-danger
<div class="alert alert-label alert-label-danger" role="alert"> <p class="mb-0"> <i class="ti ti-download label-icon label-icon-danger"></i> Alert with lable icons - check out! </p> <div> -
alert alert-label alert-label-warningalert alert-label alert-label-warning
<div class="alert alert-label alert-label-warning" role="alert"> <p class="mb-0"> <i class="ti ti-download label-icon label-icon-warning"></i> Alert with lable icons - check out! </p> <div> -
alert alert-label alert-label-infoalert alert-label alert-label-info
<div class="alert alert-label alert-label-info" role="alert"> <p class="mb-0"> <i class="ti ti-download label-icon label-icon-info"></i> Alert with lable icons - check out! </p> <div> -
alert alert-label alert-label-lightalert alert-label alert-label-light
<div class="alert alert-label alert-label-light" role="alert"> <p class="mb-0"> <i class="ti ti-download label-icon label-icon-light"></i> Alert with lable icons - check out! </p> <div> -
alert alert-label alert-label-darkalert alert-label alert-label-dark
<div class="alert alert-label alert-label-dark" role="alert"> <p class="mb-0"> <i class="ti ti-download label-icon label-icon-dark"></i> Alert with lable icons - check out! </p> <div>
-
btn-primary
<button type="button" class="btn btn-primary">Primary</button> -
btn-secondary
<button type="button" class="btn btn-secondary">Secondary</button> -
btn-success
<button type="button" class="btn btn-success">Success</button> -
btn-danger
<button type="button" class="btn btn-danger">Danger</button> -
btn-warning
<button type="button" class="btn btn-warning">Warning</button> -
btn-info
<button type="button" class="btn btn-info">Info</button> -
btn-light
<button type="button" class="btn btn-light">Light</button> -
btn-dark
<button type="button" class="btn btn-dark">Dark</button> -
btn-outline-primarybtn-outline-primary
<button type="button" class="btn btn-outline-primary">Primary</button> -
btn-outline-secondarybtn-outline-secondary
<button type="button" class="btn btn-outline-secondary">Secondary</button> -
btn-outline-successbtn-outline-success
<button type="button" class="btn btn-outline-success">Success</button> -
btn-outline-dangerbtn-outline-danger
<button type="button" class="btn btn-outline-danger">Danger</button> -
btn-outline-warningbtn-outline-warning
<button type="button" class="btn btn-outline-warning">Warning</button> -
btn-outline-infobtn-outline-info
<button type="button" class="btn btn-outline-info">Info</button> -
btn-outline-lightbtn-outline-light
<button type="button" class="btn btn-outline-light">Light</button> -
btn-outline-darkbtn-outline-dark
<button type="button" class="btn btn-outline-dark">Dark</button> -
btn-light-primarybtn-light-primary
<button type="button" class="btn btn-light-primary">Primary</button> -
btn-light-secondarybtn-light-secondary
<button type="button" class="btn btn-light-secondary">Secondary</button> -
btn-light-successbtn-light-success
<button type="button" class="btn btn-light-success">Success</button> -
btn-light-dangerbtn-light-danger
<button type="button" class="btn btn-light-danger">Danger</button> -
btn-light-warningbtn-light-warning
<button type="button" class="btn btn-light-warning">Warning</button> -
btn-light-infobtn-light-info
<button type="button" class="btn btn-light-info">Info</button> -
btn-light-lightbtn-light-light
<button type="button" class="btn btn-light-light">Light</button> -
btn-light-darkbtn-light-dark
<button type="button" class="btn btn-light-dark">Dark</button> -
icon-btnicon-btn
<button type="button" class="btn btn-primary icon-btn b-r-4"> <i class="ti ti-capture"></i></button> <button type="button" class="btn btn-secondary icon-btn b-r-4"><i class="ti ti-bell-ringing"></i></button> <button type="button" class="btn btn-outline-primary icon-btn b-r-4"> <i class="ti ti-capture"></i></button> <button type="button" class="btn btn-outline-secondary icon-btn b-r-4"><i class="ti ti-bell-ringing"></i></button> <button type="button" class="btn btn-light-primary icon-btn b-r-4"> <i class="ti ti-capture"></i></button> <button type="button" class="btn btn-light-secondary icon-btn b-r-4"><i class="ti ti-bell-ringing"></i></button> -
btn-facebookbtn-facebook
<button type="button" class="btn btn-facebook icon-btn b-r-22"><i class="ti ti-brand-facebook text-white"></i></button> -
btn-twitterbtn-twitter
<button type="button" class="btn btn-twitter icon-btn b-r-22"><i class="ti ti-brand-twitter text-white"></i></button> -
btn-pinterestbtn-pinterest
<button type="button" class="btn btn-pinterest icon-btn b-r-22"><i class="ti ti-brand-pinterest text-white"></i></button> -
btn-linkedinbtn-linkedin
<button type="button" class="btn btn-linkedin icon-btn b-r-22"><i class="ti ti-brand-linkedin text-white"></i></button> -
btn-redditbtn-reddit
<button type="button" class="btn btn-reddit icon-btn b-r-22"><i class="ti ti-brand-reddit text-white"></i></button> -
btn-whatsappbtn-whatsapp
<button type="button" class="btn btn-whatsapp icon-btn b-r-22"><i class="ti ti-brand-whatsapp text-white"></i></button> -
btn-gmailbtn-gmail
<button type="button" class="btn btn-gmail icon-btn b-r-22"><i class="ti ti-brand-gmail text-white"></i></button> -
btn-telegrambtn-telegram
<button type="button" class="btn btn-telegram icon-btn b-r-22"><i class="ti ti-brand-telegram text-white"></i></button> -
btn-youtubebtn-youtube
<button type="button" class="btn btn-youtube icon-btn b-r-22"><i class="ti ti-brand-youtube text-white"></i></button> -
btn-vimeobtn-vimeo
<button type="button" class="btn btn-vimeo icon-btn b-r-22"><i class="ti ti-brand-vimeo text-white"></i></button> -
btn-behancebtn-behance
<button type="button" class="btn btn-behance icon-btn b-r-22"><i class="ti ti-brand-behance text-white"></i></button> -
btn-githubbtn-github
<button type="button" class="btn btn-github icon-btn b-r-22"><i class="ti ti-brand-github text-white"></i></button> -
btn-skypebtn-skype
<button type="button" class="btn btn-skype icon-btn b-r-22"><i class="ti ti-brand-skype text-white"></i></button> -
btn-snapchatbtn-snapchat
<button type="button" class="btn btn-snapchat icon-btn b-r-22"><i class="ti ti-brand-snapchat text-white"></i></button>
-
cardcard
<div class="card hover-effect"> <div class="card-header"> <h6 class="mb-0 mt-2 f-w-600">My Profile</h6> </div> <div class="card-body"> <p> .... </p> </div> <div class="card-footer"> <div class="row"> <div class="col-6"> <i class="ti ti-heart-filled text-danger f-s-16 m-r-5"> </i> <span> 60 likes </span> </div> <div class="col-6"> <ul class="avatar-group float-end"> <li class="h-25 w-25 d-flex-center b-r-50 text-bg-danger b-2-light position-relative" data-bs-toggle="tooltip" data-bs-title="Sabrina Torres"> <img src="../assets/images/avtar/4.png" alt="" class="img-fluid b-r-50 overflow-hidden"> </li> <li class="h-25 w-25 d-flex-center b-r-50 text-bg-info b-2-light position-relative" data-bs-toggle="tooltip" data-bs-title="Sabrina Torres"> <img src="../assets/images/avtar/3.png" alt="" class="img-fluid b-r-50 overflow-hidden"> </li> <li class="text-bg-primary h-25 w-25 d-flex-center b-r-50" data-bs-toggle="tooltip" data-bs-title="5 More"> 5+ </li> </ul> </div> </div> </div> -
card-primarycard-primary
<div class="card hover-effect card-primary"> <div class="card-header"> <h5>primary card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-secondarycard-secondary
<div class="card hover-effect card-secondary"> <div class="card-header"> <h5>secondary card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-successcard-success
<div class="card hover-effect card-success"> <div class="card-header"> <h5>success card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-dangercard-danger
<div class="card hover-effect card-danger"> <div class="card-header"> <h5>danger card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-warningcard-warning
<div class="card hover-effect card-warning"> <div class="card-header"> <h5>warning card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-infocard-info
<div class="card hover-effect card-info"> <div class="card-header"> <h5>info card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-lightcard-light
<div class="card hover-effect card-light"> <div class="card-header"> <h5>light card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-darkcard-dark
<div class="card hover-effect card-dark"> <div class="card-header"> <h5>dark card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-outline-primarycard-outline-primary
<div class="card hover-effect card-outline-primary"> <div class="card-header"> <h5>Outline card-outline-primary card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-outline-secondarycard-outline-secondary
<div class="card hover-effect card-outline-secondary"> <div class="card-header"> <h5>Outline card-outline-secondary card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-outline-successcard-outline-success
<div class="card hover-effect card-outline-success"> <div class="card-header"> <h5>Outline card-outline-success card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-outline-dangercard-outline-danger
<div class="card hover-effect card-outline-danger"> <div class="card-header"> <h5>Outline card-outline-danger card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-outline-warningcard-outline-warning
<div class="card hover-effect card-outline-warning"> <div class="card-header"> <h5>Outline card-outline-warning card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-outline-infocard-outline-info
<div class="card hover-effect card-outline-info"> <div class="card-header"> <h5>Outline card-outline-info card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-outline-lightcard-outline-light
<div class="card hover-effect card-outline-light"> <div class="card-header"> <h5>Outline card-outline-light card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
card-outline-darkcard-outline-dark
<div class="card hover-effect card-outline-dark"> <div class="card-header"> <h5>Outline card-outline-dark card</h5> </div> <div class="card-body"> <h6>Card body</h6> <p>...</p> </div> </div> -
icon-bgicon-bg
<div class="col-lg-8 offset-lg-2"> <div class="card hover-effect card-primary"> <div class="card-body"> <i class="ti ti-alarm icon-bg"></i> <h6>Card With icon</h6> <p>With supporting text below lead-in to additional content below as a natural.</p> </div> </div> </div> -
border-primary border-topborder-primary border-top
<div class="card hover-effect border-primary border-top border-4"> <div class="card-body"> <h6>Card With Top border</h6> <p>With supporting text below lead-in to additional content below as a natural.</p> </div> </div> -
border-secondary border-bottomborder-secondary border-bottom
<div class="card hover-effect border-secondary border-bottom border-4"> <div class="card-body"> <h6>Card With Bottom border</h6> <p>With supporting text below lead-in to additional content below as a natural.</p> </div> </div> -
border-success border-startborder-success border-start
<div class="card hover-effect border-success border-start border-4"> <div class="card-body"> <h6>Card With Start border</h6> <p>With supporting text below lead-in to additional content below as a natural.</p> </div> </div> -
border-danger border-endborder-danger border-end
<div class="card hover-effect border-danger border-end border-4"> <div class="card-body"> <h6>Card With End border</h6> <p>With supporting text below lead-in to additional content below as a natural.</p> </div> </div>
-
app-dropdownapp-dropdown
<div class="card"> <div class="card-body d-flex flex-wrap gap-2"> <div class="app-dropdown"> <button class="btn btn-primary border-0 " type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> Clickable Submenu </button> <div class="dropdown-menu mb-3"> <a href="#" class="dropdown-item"> <span> Action</span> <i class="ti ti-user-plus ms-auto"></i> </a> <hr class="dropdown-divider"> <a class="dropdown-item border-0" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <span>More Option</span> <i class="ti ti-arrow-badge-right ms-auto"></i> </a> <div class="dropdown-menu sub-menu"> <a href="#" class="dropdown-item"> <span> Action</span> <i class="ti ti-user-plus ms-auto"></i> </a> <a href="#" class="dropdown-item"> <span>Another action</span> <i class="ti ti-circles-relation ms-auto"></i> </a> </div> </div> </div> <div class="hover-dropdown app-hover-dropdown"> <button class="btn btn-primary dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" data-trigger="hover" aria-expanded="false"> Hoverable Dropdown </button> <ul class="dropdown-menu bg-dark"> <li class="dropdown-item"> <a href="#"> <span> Action</span> </a> <i class="ti ti-user-plus ms-auto"></i> </li> <li class="dropdown-item"> <a href="#"> <span>Another action</span> </a> <i class="ti ti-circles-relation ms-auto"></i> </li> <li class="dropdown-item"> <a href="#"> <span>Something else here</span> </a> <i class="ti ti-message-circle ms-auto"></i> </li> <li> <hr class="dropdown-divider"> </li> <li class="hover-dropdown"> <a role="button" class="dropdown-item waves-effect waves-light" data-bs-toggle="dropdown" data-trigger="hover" aria-expanded="false"> More Option </a> <ul class="dropdown-menu hover-submenu bg-dark"> <li class="dropdown-item"> <a href="#"> <span> Action</span> </a> <i class="ti ti-user-plus ms-auto"></i> </li> <li class="dropdown-item"> <a href="#"> <span>Another action</span> </a> <i class="ti ti-circles-relation ms-auto"></i> </li> <li class="dropdown-item"> <a href="#"> <span>Something else here</span> </a> <i class="ti ti-message-circle ms-auto"></i> </li> </ul> </li> </ul> </div> </div> </div> -
app-dropdown primarybtn btn-primary
<div class="btn-group btn-rtl"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> primary <i class="mdi mdi-chevron-down"></i> </button> <div class="dropdown-menu"> <!-- item--> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> -
app-dropdown secondarybtn btn-secondary
<div class="btn-group btn-rtl"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> secondary <i class="mdi mdi-chevron-down"></i> </button> <div class="dropdown-menu"> <!-- item--> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> -
app-dropdown successbtn btn-success
<div class="btn-group btn-rtl"> <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> success <i class="mdi mdi-chevron-down"></i> </button> <div class="dropdown-menu"> <!-- item--> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> -
app-dropdown dangerbtn btn-danger
<div class="btn-group btn-rtl"> <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> danger <i class="mdi mdi-chevron-down"></i> </button> <div class="dropdown-menu"> <!-- item--> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> -
app-dropdown warningbtn btn-warning
<div class="btn-group btn-rtl"> <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> warning <i class="mdi mdi-chevron-down"></i> </button> <div class="dropdown-menu"> <!-- item--> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> -
app-dropdown infobtn btn-info
<div class="btn-group btn-rtl"> <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> info <i class="mdi mdi-chevron-down"></i> </button> <div class="dropdown-menu"> <!-- item--> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> -
app-dropdown lightbtn btn-light
<div class="btn-group btn-rtl"> <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> light <i class="mdi mdi-chevron-down"></i> </button> <div class="dropdown-menu"> <!-- item--> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> -
app-dropdown darkbtn btn-dark
<div class="btn-group btn-rtl"> <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> dark <i class="mdi mdi-chevron-down"></i> </button> <div class="dropdown-menu"> <!-- item--> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> -
dropdown-menu menu-primarybtn btn-primary
<div class="app-dropdown"> <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> <i class="ti ti-dots"></i> </button> <ul class="dropdown-menu menu-primary show"> <li class="dropdown-item d-flex justify-content-between"> <span> Action</span> <i class="ti ti-user-plus"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Another action</span> <i class="ti ti-circles-relation"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Something else here</span> <i class="ti ti-message-circle"></i> </li> <li class="dropdown-divider"></li> <li class="dropdown-item d-flex justify-content-between"> <span>Settings</span> <i class="ti ti-settings"></i> </li> </ul> </div> -
dropdown-menu menu-secondarybtn btn-secondary
<div class="app-dropdown"> <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> <i class="ti ti-dots"></i> </button> <ul class="dropdown-menu menu-secondary show"> <li class="dropdown-item d-flex justify-content-between"> <span> Action</span> <i class="ti ti-user-plus"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Another action</span> <i class="ti ti-circles-relation"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Something else here</span> <i class="ti ti-message-circle"></i> </li> <li class="dropdown-divider"></li> <li class="dropdown-item d-flex justify-content-between"> <span>Settings</span> <i class="ti ti-settings"></i> </li> </ul> </div> -
dropdown-menu menu-successbtn btn-success
<div class="app-dropdown"> <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> <i class="ti ti-dots"></i> </button> <ul class="dropdown-menu menu-success show"> <li class="dropdown-item d-flex justify-content-between"> <span> Action</span> <i class="ti ti-user-plus"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Another action</span> <i class="ti ti-circles-relation"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Something else here</span> <i class="ti ti-message-circle"></i> </li> <li class="dropdown-divider"></li> <li class="dropdown-item d-flex justify-content-between"> <span>Settings</span> <i class="ti ti-settings"></i> </li> </ul> </div> -
dropdown-menu menu-dangerbtn btn-danger
<div class="app-dropdown"> <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> <i class="ti ti-dots"></i> </button> <ul class="dropdown-menu menu-danger show"> <li class="dropdown-item d-flex justify-content-between"> <span> Action</span> <i class="ti ti-user-plus"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Another action</span> <i class="ti ti-circles-relation"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Something else here</span> <i class="ti ti-message-circle"></i> </li> <li class="dropdown-divider"></li> <li class="dropdown-item d-flex justify-content-between"> <span>Settings</span> <i class="ti ti-settings"></i> </li> </ul> </div> -
dropdown-menu menu-warningbtn btn-warning
<div class="app-dropdown"> <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> <i class="ti ti-dots"></i> </button> <ul class="dropdown-menu menu-warning show"> <li class="dropdown-item d-flex justify-content-between"> <span> Action</span> <i class="ti ti-user-plus"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Another action</span> <i class="ti ti-circles-relation"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Something else here</span> <i class="ti ti-message-circle"></i> </li> <li class="dropdown-divider"></li> <li class="dropdown-item d-flex justify-content-between"> <span>Settings</span> <i class="ti ti-settings"></i> </li> </ul> </div> -
dropdown-menu menu-infobtn btn-info
<div class="app-dropdown"> <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> <i class="ti ti-dots"></i> </button> <ul class="dropdown-menu menu-info show"> <li class="dropdown-item d-flex justify-content-between"> <span> Action</span> <i class="ti ti-user-plus"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Another action</span> <i class="ti ti-circles-relation"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Something else here</span> <i class="ti ti-message-circle"></i> </li> <li class="dropdown-divider"></li> <li class="dropdown-item d-flex justify-content-between"> <span>Settings</span> <i class="ti ti-settings"></i> </li> </ul> </div> -
dropdown-menu menu-lightbtn btn-light
<div class="app-dropdown"> <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> <i class="ti ti-dots"></i> </button> <ul class="dropdown-menu menu-light show"> <li class="dropdown-item d-flex justify-content-between"> <span> Action</span> <i class="ti ti-user-plus"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Another action</span> <i class="ti ti-circles-relation"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Something else here</span> <i class="ti ti-message-circle"></i> </li> <li class="dropdown-divider"></li> <li class="dropdown-item d-flex justify-content-between"> <span>Settings</span> <i class="ti ti-settings"></i> </li> </ul> </div> -
dropdown-menu menu-darkbtn btn-dark
<div class="app-dropdown"> <button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> <i class="ti ti-dots"></i> </button> <ul class="dropdown-menu menu-dark show"> <li class="dropdown-item d-flex justify-content-between"> <span> Action</span> <i class="ti ti-user-plus"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Another action</span> <i class="ti ti-circles-relation"></i> </li> <li class="dropdown-item d-flex justify-content-between"> <span>Something else here</span> <i class="ti ti-message-circle"></i> </li> <li class="dropdown-divider"></li> <li class="dropdown-item d-flex justify-content-between"> <span>Settings</span> <i class="ti ti-settings"></i> </li> </ul> </div>
-
Primarybg-primary h-45 w-45 d-flex-center b-r-50
<span class="bg-primary h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
Secondarybg-secondary h-45 w-45 d-flex-center b-r-50
<span class="bg-secondary h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
Successbg-success h-45 w-45 d-flex-center b-r-50
<span class="bg-success h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
Dangerbg-danger h-45 w-45 d-flex-center b-r-50
<span class="bg-danger h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
Warningbg-warning h-45 w-45 d-flex-center b-r-50
<span class="bg-warning h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
Infobg-info h-45 w-45 d-flex-center b-r-50
<span class="bg-info h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
Lightbg-light h-45 w-45 d-flex-center b-r-50
<span class="bg-light h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
Darkbg-dark h-45 w-45 d-flex-center b-r-50
<span class="bg-dark h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-outline-primarytext-outline-primary h-45 w-45 d-flex-center b-r-50
<span class="text-outline-primary h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-outline-secondarytext-outline-secondary h-45 w-45 d-flex-center b-r-50
<span class="text-outline-secondary h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-outline-successtext-outline-success h-45 w-45 d-flex-center b-r-50
<span class="text-outline-success h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-outline-dangertext-outline-danger h-45 w-45 d-flex-center b-r-50
<span class="text-outline-danger h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-outline-warningtext-outline-warning h-45 w-45 d-flex-center b-r-50
<span class="text-outline-warning h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-outline-infotext-outline-info h-45 w-45 d-flex-center b-r-50
<span class="text-outline-info h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-outline-lighttext-outline-light h-45 w-45 d-flex-center b-r-50
<span class="text-outline-light h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-outline-darktext-outline-dark h-45 w-45 d-flex-center b-r-50
<span class="text-outline-dark h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
avtar images
<div class="d-flex gap-3 flex-wrap"> <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary"> <img src="../assets/images/avtar/1.png" alt="" class="img-fluid"> </div> <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-secondary"> <img src="../assets/images/avtar/2.png" alt="" class="img-fluid"> </div> <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success"> <img src="../assets/images/avtar/3.png" alt="" class="img-fluid"> </div> <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-info"> <img src="../assets/images/avtar/4.png" alt="" class="img-fluid"> </div> <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success"> <img src="../assets/images/avtar/5.png" alt="" class="img-fluid"> </div> <div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger"> <img src="../assets/images/avtar/6.png" alt="" class="img-fluid"> </div> </div> -
avtar size
<div class="d-flex gap-3 flex-wrap"> <span class="bg-secondary h-30 w-30 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> <span class="bg-success h-35 w-35 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> <span class="bg-info h-40 w-40 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> <span class="bg-warning h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> <span class="bg-danger h-50 w-50 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> </div> </div> -
text-light-primarytext-light-primary h-45 w-45 d-flex-center b-r-50
<span class="text-light-primary h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-light-secondarytext-light-secondary h-45 w-45 d-flex-center b-r-50
<span class="text-light-secondary h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-light-successtext-light-success h-45 w-45 d-flex-center b-r-50
<span class="text-light-success h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-light-dangertext-light-danger h-45 w-45 d-flex-center b-r-50
<span class="text-light-danger h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-light-warningtext-light-warning h-45 w-45 d-flex-center b-r-50
<span class="text-light-warning h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-light-infotext-light-info h-45 w-45 d-flex-center b-r-50
<span class="text-light-info h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-light-lighttext-light-light h-45 w-45 d-flex-center b-r-50
<span class="text-light-light h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
text-light-darktext-light-dark h-45 w-45 d-flex-center b-r-50
<span class="text-light-dark h-45 w-45 d-flex-center b-r-50"> <i class="fa-solid fa-user"></i> </span> -
avtar radious
<div class="d-flex gap-3 flex-wrap"> <span class="text-light-primary h-45 w-45 d-flex-center b-r-0"> <i class="fa-solid fa-user"></i> </span> <span class="text-light-secondary h-45 w-45 d-flex-center b-r-6"> <i class="fa-solid fa-user"></i> </span> <span class="text-light-success h-45 w-45 d-flex-center b-r-10"> <i class="fa-solid fa-user"></i> </span> <span class="text-light-info h-45 w-45 d-flex-center b-r-14"> <i class="fa-solid fa-user"></i> </span> <span class="text-light-warning h-45 w-45 d-flex-center b-r-20"> <i class="fa-solid fa-user"></i> </span> <span class="text-light-danger h-45 w-45 d-flex-center b-r-30"> <i class="fa-solid fa-user"></i> </span> </div> -
Avtar group
<div class="d-flex gap-3 flex-wrap"> <ul class="avatar-group"> <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary b-2-light" data-bs-toggle="tooltip" data-bs-title="Sabrina Torres"> <img src="../assets/images/avtar/4.png" alt="" class="img-fluid"> </li> <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success b-2-light" data-bs-toggle="tooltip" data-bs-title="Eva Bailey"> <img src="../assets/images/avtar/5.png" alt="" class="img-fluid"> </li> <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger b-2-light" data-bs-toggle="tooltip" data-bs-title="Michael Hughes"> <img src="../assets/images/avtar/6.png" alt="" class="img-fluid"> </li> <li class="text-bg-secondary h-35 w-35 d-flex-center b-r-50" data-bs-toggle="tooltip" data-bs-title="10 More"> 10+ </li> </ul> <ul class="avatar-group"> <li class="h-45 w-45 d-flex-center b-r-50 text-bg-danger b-2-light position-relative" data-bs-toggle="tooltip" data-bs-title="Sabrina Torres"> <span class="position-absolute top-0 start-2 p-1 bg-danger border border-light rounded-circle"></span> <img src="../assets/images/avtar/4.png" alt="" class="img-fluid b-r-50 overflow-hidden"> </li> <li class="h-45 w-45 d-flex-center b-r-50 text-bg-success b-2-light position-relative" data-bs-toggle="tooltip" data-bs-title="Sabrina Torres"> <span class="position-absolute top-0 start-2 p-1 bg-success border border-light rounded-circle"></span> <img src="../assets/images/avtar/1.png" alt="" class="img-fluid b-r-50 overflow-hidden"> </li> <li class="h-45 w-45 d-flex-center b-r-50 text-bg-warning b-2-light position-relative" data-bs-toggle="tooltip" data-bs-title="Sabrina Torres"> <span class="position-absolute top-0 start-2 p-1 bg-warning border border-light rounded-circle"></span> <img src="../assets/images/avtar/2.png" alt="" class="img-fluid b-r-50 overflow-hidden"> </li> <li class="h-45 w-45 d-flex-center b-r-50 text-bg-info b-2-light position-relative" data-bs-toggle="tooltip" data-bs-title="Sabrina Torres"> <span class="position-absolute top-0 start-2 p-1 bg-info border border-light rounded-circle"></span> <img src="../assets/images/avtar/3.png" alt="" class="img-fluid b-r-50 overflow-hidden"> </li> <li class="text-bg-primary h-35 w-35 d-flex-center b-r-50" data-bs-toggle="tooltip" data-bs-title="5 More"> 5+ </li> </ul> </div>
-
app-tabs-primaryapp-tabs-primary
<div class="card"> <div class="card-body"> <ul class="nav nav-tabs app-tabs-primary" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="html-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">HTML</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="css-tab" data-bs-toggle="tab" data-bs-target="#css-tab-pane" type="button" role="tab" aria-controls="css-tab-pane" aria-selected="false">CSS</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="php-tab" data-bs-toggle="tab" data-bs-target="#php-tab-pane" type="button" role="tab" aria-controls="php-tab-pane" aria-selected="false">PHP</button> </li> </ul> <div class="tab-content" id="BasicContent"> <div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel" aria-labelledby="html-tab" tabindex="0"> <p>Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.</p> </div> <div class="tab-pane fade" id="css-tab-pane" role="tabpanel" aria-labelledby="css-tab" tabindex="0"> <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.</p> <p>CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p> </div> <div class="tab-pane fade" id="php-tab-pane" role="tabpanel" aria-labelledby="php-tab" tabindex="0"> <p>PHP is a popular general-purpose scripting language that is especially suited to web development.</p> </div> </div> </div> </div> -
tab-outline-primarytab-outline-primary
<div class="card"> <div class="card-body"> <ul class="nav nav-tabs tab-outline-primary" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="connect-tab" data-bs-toggle="tab" data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane" aria-selected="true">Connect</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="discover-tab" data-bs-toggle="tab" data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane" aria-selected="false">Discover</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane" type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button> </li> </ul> <div class="tab-content" id="OutlineContent"> <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel" aria-labelledby="connect-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab one.</h6> ... </div> <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab two.</h6> ... </div> <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab three.</h6> ... </div> </div> </div> </div> -
tab-light-primarytab-light-primary
<div class="card"> <div class="card-body"> <ul class="nav nav-tabs tab-light-primary" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="connect-tab" data-bs-toggle="tab" data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane" aria-selected="true">Connect</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="discover-tab" data-bs-toggle="tab" data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane" aria-selected="false">Discover</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane" type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button> </li> </ul> <div class="tab-content" id="OutlineContent"> <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel" aria-labelledby="connect-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab one.</h6> ... </div> <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab two.</h6> ... </div> <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab three.</h6> ... </div> </div> </div> </div> -
vertical-tabvertical-tab
<div class="card"> <div class="card-body vertical-tab"> <ul class="nav nav-tabs tab-light-secondary ms-3" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="connect-tab" data-bs-toggle="tab" data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane" aria-selected="true">Connect</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="discover-tab" data-bs-toggle="tab" data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane" aria-selected="false">Discover</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane" type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button> </li> </ul> <div class="tab-content" id="OutlineContent"> <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel" aria-labelledby="connect-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab one.</h6> ... </div> <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab two.</h6> ... </div> <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab three.</h6> ... </div> </div> </div> </div> -
vertical-right-tabvertical-right-tab
<div class="card"> <div class="card-body vertical-right-tab"> <ul class="nav nav-tabs app-tabs-success" id="Outline" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="connect-tab" data-bs-toggle="tab" data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane" aria-selected="true">Connect</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="discover-tab" data-bs-toggle="tab" data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane" aria-selected="false">Discover</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane" type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button> </li> </ul> <div class="tab-content" id="OutlineContent"> <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel" aria-labelledby="connect-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab one.</h6> ... </div> <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab two.</h6> ... </div> <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab three.</h6> ... </div> </div> </div> </div> -
tab background
<ul class="nav nav-tabs tab-primary bg-primary p-1" id="bg" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="features-tab" data-bs-toggle="tab" data-bs-target="#features-tab-pane" type="button" role="tab" aria-controls="features-tab-pane" aria-selected="true"> <i class="ti ti-disc pe-1 ps-1"></i> features</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history-tab-pane" type="button" role="tab" aria-controls="history-tab-pane" aria-selected="false"><i class="ti ti-history pe-1 ps-1"></i>History</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews-tab-pane" type="button" role="tab" aria-controls="reviews-tab-pane" aria-selected="false"><i class="ti ti-star pe-1 ps-1"></i>reviews</button> </li> </ul> <div class="tab-content" id="bgContent"> <div class="tab-pane fade show active" id="features-tab-pane" role="tabpanel" aria-labelledby="features-tab" tabindex="0"> <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p> </div> <div class="tab-pane fade" id="history-tab-pane" role="tabpanel" aria-labelledby="history-tab" tabindex="0"> <ol> <li>Show only the last tab.</li> <li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li> <li>Matches a tab, show it and hide all following siblings.</li> </ol> </div> <div class="tab-pane fade" id="reviews-tab-pane" role="tabpanel" aria-labelledby="reviews-tab" tabindex="0"> <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p> </div> </div> -
bottom-tabbottom-tab
<div class="card"> <div class="card-body bottom-tab"> <ul class="nav nav-tabs app-tabs-success" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="connect-tab" data-bs-toggle="tab" data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane" aria-selected="true">Connect</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="discover-tab" data-bs-toggle="tab" data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane" aria-selected="false">Discover</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane" type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button> </li> </ul> <div class="tab-content" id="OutlineContent"> <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel" aria-labelledby="connect-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab one.</h6> ... </div> <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab two.</h6> ... </div> <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab three.</h6> ... </div> </div> </div> </div> -
justify-content-aroundjustify-content-around
<div class="card"> <div class="card-body"> <ul class="nav nav-tabs app-tabs-dark justify-content-around" role="tablist"> <li class="nav-item flex-fill" role="presentation"> <button class="nav-link w-100 active" id="connect-tab" data-bs-toggle="tab" data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane" aria-selected="true">Connect</button> </li> <li class="nav-item flex-fill" role="presentation"> <button class="nav-link w-100" id="discover-tab" data-bs-toggle="tab" data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane" aria-selected="false">Discover</button> </li> <li class="nav-item flex-fill" role="presentation"> <button class="nav-link w-100" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane" type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button> </li> </ul> <div class="tab-content" id="OutlineContent"> <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel" aria-labelledby="connect-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab one.</h6> ... </div> <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab two.</h6> ... </div> <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab" tabindex="0"> <h6 class="mb-1">This is the content of tab three.</h6> ... </div> </div> </div> </div> -
image as nav link
<ul class="nav nav-tabs tab-light-secondary" id="lang-Light" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link gap-2 active" id="lang-home-tab" data-bs-toggle="tab" data-bs-target="#lang-home-tab-pane" type="button" role="tab" aria-controls="lang-home-tab-pane" aria-selected="true"> <i class="flag-icon flag-icon-usa"></i> USA </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link gap-2" id="lang-profile-tab" data-bs-toggle="tab" data-bs-target="#lang-profile-tab-pane" type="button" role="tab" aria-controls="lang-profile-tab-pane" aria-selected="false"> <i class="flag-icon flag-icon-gbr"></i> GBR </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link gap-2" id="lang-contact-tab" data-bs-toggle="tab" data-bs-target="#lang-contact-tab-pane" type="button" role="tab" aria-controls="lang-contact-tab-pane" aria-selected="false"> <i class="flag-icon flag-icon-deu"></i> DEU </button> </li> </ul> <div class="tab-content" id="lang-LightContent"> <div class="tab-pane fade show active" id="lang-home-tab-pane" role="tabpanel" aria-labelledby="lang-home-tab" tabindex="0"> <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p> </div> <div class="tab-pane fade" id="lang-profile-tab-pane" role="tabpanel" aria-labelledby="lang-profile-tab" tabindex="0"> <ol> <li>Show only the last tab.</li> <li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li> <li>Matches a tab, show it and hide all following siblings.</li> </ol> </div> <div class="tab-pane fade" id="lang-contact-tab-pane" role="tabpanel" aria-labelledby="lang-contact-tab" tabindex="0"> <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p> </div> </div>
-
accordion-primaryaccordion-primary
<div class="card"> <div class="card-body"> <div class="accordion app-accordion accordion-primary"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample"> <div class="accordion-body"> ... </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> ... </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Accordion Item #3 </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> ... </div> </div> </div> </div> </div> </div> -
accordion-outline-secondaryaccordion-outline-secondary
<div class="card"> <div class="card-body"> <div class="accordion app-accordion accordion-outline-secondary"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneOutline" aria-expanded="true" aria-controls="collapseOneOutline"> Accordion Item #1 </button> </h2> <div id="collapseOneOutline" class="accordion-collapse collapse show" data-bs-parent="#accordionExampleoutlineoutline"> <div class="accordion-body"> ... </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwooutline" aria-expanded="false" aria-controls="collapseTwooutline"> Accordion Item #2 </button> </h2> <div id="collapseTwooutline" class="accordion-collapse collapse" data-bs-parent="#accordionExampleoutlineoutline"> <div class="accordion-body"> ... </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThreeoutline" aria-expanded="false" aria-controls="collapseThreeoutline"> Accordion Item #3 </button> </h2> <div id="collapseThreeoutline" class="accordion-collapse collapse" data-bs-parent="#accordionExampleoutlineoutline"> <div class="accordion-body"> ... </div> </div> </div> </div> </div> </div> -
accordion-light-successaccordion-light-success
<div class="accordion app-accordion accordion-light-success" id="accordionFlushExample"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="true" aria-controls="flush-collapseOne"> Accordion Item #1 </button> </h2> <div id="flush-collapseOne" class="accordion-collapse show" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> Accordion Item #2 </button> </h2> <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"> Accordion Item #3 </button> </h2> <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div> </div> </div> </div> -
accordion-flushaccordion-flush
<div class="card"> <div class="card-body"> <div class="accordion app-accordion accordion-flush accordion-secondary" id="accordionappflushExample"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#appflush-collapseOne" aria-expanded="true" aria-controls="appflush-collapseOne"> Accordion Item #1 </button> </h2> <div id="appflush-collapseOne" class="accordion-collapse show" data-bs-parent="#accordionappflushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-appflush</code> class. This is the first item's accordion body.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#appflush-collapseTwo" aria-expanded="false" aria-controls="appflush-collapseTwo"> Accordion Item #2 </button> </h2> <div id="appflush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionappflushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-appflush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#appflush-collapseThree" aria-expanded="false" aria-controls="appflush-collapseThree"> Accordion Item #3 </button> </h2> <div id="appflush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionrealExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-appflush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div> </div> </div> </div> </div> </div> -
app-accordion-icon-leftapp-accordion-icon-left
<div class="card"> <div class="card-body"> <div class="accordion app-accordion accordion-light-primary app-accordion-icon-left app-accordion-plus" id="accordionlefticonExample"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#lefticon-collapseOne" aria-expanded="true" aria-controls="lefticon-collapseOne"> What happens if I just pay my ticket? </button> </h2> <div id="lefticon-collapseOne" class="accordion-collapse collapse show"> <div class="accordion-body"> ... </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#lefticon-collapseTwo" aria-expanded="false" aria-controls="lefticon-collapseTwo"> Can this ticket affect my job? </button> </h2> <div id="lefticon-collapseTwo" class="accordion-collapse collapse"> <div class="accordion-body"> ... </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#lefticon-collapseThree" aria-expanded="false" aria-controls="lefticon-collapseThree"> How long does it take to resolve my case? </button> </h2> <div id="lefticon-collapseThree" class="accordion-collapse collapse"> <div class="accordion-body"> ... </div> </div> </div> </div> </div> </div> -
app-accordion-plusapp-accordion-plus
<div class="card"> <div class="card-body"> <div class="accordion app-accordion accordion-light-primary app-accordion-icon-left app-accordion-plus" id="accordionlefticonExample"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#lefticon-collapseOne" aria-expanded="true" aria-controls="lefticon-collapseOne"> What happens if I just pay my ticket? </button> </h2> <div id="lefticon-collapseOne" class="accordion-collapse collapse show"> <div class="accordion-body"> ... </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#lefticon-collapseTwo" aria-expanded="false" aria-controls="lefticon-collapseTwo"> Can this ticket affect my job? </button> </h2> <div id="lefticon-collapseTwo" class="accordion-collapse collapse"> <div class="accordion-body"> ... </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#lefticon-collapseThree" aria-expanded="false" aria-controls="lefticon-collapseThree"> How long does it take to resolve my case? </button> </h2> <div id="lefticon-collapseThree" class="accordion-collapse collapse"> <div class="accordion-body"> ... </div> </div> </div> </div> </div> </div> -
No icon indicators
<div class="card"> <div class="card-body"> <div class="accordion app-accordion accordion-light-danger app-accordion-no-icon" id="accordionnoiconExample"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#noicon-collapseOne" aria-expanded="true" aria-controls="noicon-collapseOne"> <i class="ti ti-message-report me-1 f-s-20"></i> What happens if I just pay my ticket? </button> </h2> <div id="noicon-collapseOne" class="accordion-collapse collapse show"> <div class="accordion-body"> Paying your ticket without contesting it can result in a conviction on your driving record. This can have long-lasting consequences such as increased insurance rates, driver's license suspension, employment restrictions, and additional fines imposed by your state's DMV. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#noicon-collapseTwo" aria-expanded="false" aria-controls="noicon-collapseTwo"> <i class="ti ti-ticket me-1 f-s-20"></i> Can this ticket affect my job? </button> </h2> <div id="noicon-collapseTwo" class="accordion-collapse collapse"> <div class="accordion-body"> Absolutely, tickets recorded on your driving history can result in disqualification from driving commercially or obtaining a commercial driver's license (CDL). They can also disqualify you from driving for ride-sharing services such as Uber or Lyft, which require a clean driving record. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#noicon-collapseThree" aria-expanded="false" aria-controls="noicon-collapseThree"> <i class="ti ti-transition-bottom me-1 f-s-20"></i> How long does it take to resolve my case? </button> </h2> <div id="noicon-collapseThree" class="accordion-collapse collapse"> <div class="accordion-body"> It really depends on the court your ticket landed in. Some courts move faster than others, but on average, it could take about 1-3 months. This is perfectly normal in the legal process. </div> </div> </div> </div> </div> </div>
-
bg-primarybg-primary
<button type="button" class="btn bg-primary text-white">bg-primary</button> -
bg-secondarybg-secondary
<button type="button" class="btn bg-secondary text-white">bg-secondary</button> -
bg-successbg-success
<button type="button" class="btn bg-success text-white">bg-success</button> -
bg-dangerbg-danger
<button type="button" class="btn bg-danger text-white">bg-danger</button> -
bg-warningbg-warning
<button type="button" class="btn bg-warning text-white">bg-warning</button> -
bg-infobg-info
<button type="button" class="btn bg-info text-white">bg-info</button> -
bg-lightbg-light
<button type="button" class="btn bg-light text-white">bg-light</button> -
bg-darkbg-dark
<button type="button" class="btn bg-dark text-white">bg-dark</button> -
bg-primary-900bg-primary-900
<button type="button" class="btn bg-primary-900">bg-primary-900</button> -
bg-primary-800bg-primary-800
<button type="button" class="btn bg-primary-800">bg-primary-800</button> -
bg-primary-700bg-primary-700
<button type="button" class="btn bg-primary-700">bg-primary-700</button> -
bg-primary-600bg-primary-600
<button type="button" class="btn bg-primary-600">bg-primary-600</button> -
bg-primary-500bg-primary-500
<button type="button" class="btn bg-primary-500">bg-primary-500</button> -
bg-primary-400bg-primary-400
<button type="button" class="btn bg-primary-400">bg-primary-400</button> -
bg-primary-300bg-primary-300
<button type="button" class="btn bg-primary-300">bg-primary-300</button> -
bg-outline-primarybg-outline-primary
<button type="button" class="btn bg-outline-primary">bg-outline-primary</button> -
bg-outline-secondarybg-outline-secondary
<button type="button" class="btn bg-outline-secondary">bg-outline-secondary</button> -
bg-outline-successbg-outline-success
<button type="button" class="btn bg-outline-success">bg-outline-success</button> -
bg-outline-dangerbg-outline-danger
<button type="button" class="btn bg-outline-danger">bg-outline-danger</button> -
bg-outline-warningbg-outline-warning
<button type="button" class="btn bg-outline-warning">bg-outline-warning</button> -
bg-outline-infobg-outline-info
<button type="button" class="btn bg-outline-info">bg-outline-info</button> -
bg-outline-lightbg-outline-light
<button type="button" class="btn bg-outline-light">bg-outline-light</button> -
bg-outline-darkbg-outline-dark
<button type="button" class="btn bg-outline-dark">bg-outline-dark</button> -
bg-light-primarybg-light-primary
<button type="button" class="btn bg-light-primary">bg-light-primary</button> -
bg-light-secondarybg-light-secondary
<button type="button" class="btn bg-light-secondary">bg-light-secondary</button> -
bg-light-successbg-light-success
<button type="button" class="btn bg-light-success">bg-light-success</button> -
bg-light-dangerbg-light-danger
<button type="button" class="btn bg-light-danger">bg-light-danger</button> -
bg-light-warningbg-light-warning
<button type="button" class="btn bg-light-warning">bg-light-warning</button> -
bg-light-infobg-light-info
<button type="button" class="btn bg-light-info">bg-light-info</button> -
bg-light-lightbg-light-light
<button type="button" class="btn bg-light-light">bg-light-light</button> -
bg-light-darkbg-light-dark
<button type="button" class="btn bg-light-dark">bg-light-dark</button>
-
progress-bar bg-primaryprogress-bar bg-primary
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-primary" style="width: 12.5%"></div> </div> -
progress-bar bg-secondaryprogress-bar bg-secondary
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-secondary" style="width: 12.5%"></div> </div> -
progress-bar bg-successprogress-bar bg-success
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-success" style="width: 12.5%"></div> </div> -
progress-bar bg-dangerprogress-bar bg-danger
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-danger" style="width: 12.5%"></div> </div> -
progress-bar bg-warningprogress-bar bg-warning
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-warning" style="width: 12.5%"></div> </div> -
progress-bar bg-infoprogress-bar bg-info
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-info" style="width: 12.5%"></div> </div> -
progress-bar bg-lightprogress-bar bg-light
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-light" style="width: 12.5%"></div> </div> -
progress-bar bg-darkprogress-bar bg-dark
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-dark" style="width: 12.5%"></div> </div> -
progress-bar bg-light-primaryprogress-bar bg-primary
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-light-primary" style="width: 12.5%"> 12.5% </div> </div> -
progress-bar bg-light-secondaryprogress-bar bg-secondary
<div class="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-light-secondary" style="width: 25%"> 25% </div> </div> -
progress-bar bg-light-successprogress-bar bg-success
<div class="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-light-success" style="width: 37.5%"> 37.5% </div> </div> -
progress-bar bg-light-dangerprogress-bar bg-danger
<div class="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-light-danger" style="width: 50%"> 50% </div> </div> -
progress-bar bg-light-warningprogress-bar bg-warning
<div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-light-warning" style="width: 62.5%"> 62.5% </div> </div> -
progress-bar bg-light-infoprogress-bar bg-info
<div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-light-info" style="width: 62.5%"> 62.5% </div> </div> -
progress-bar bg-light-lightprogress-bar bg-info
<div class="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-light-light" style="width: 82.5%"> 82.5% </div> </div> -
progress-bar bg-light-darkprogress-bar bg-info
<div class="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-light-dark" style="width: 95%"> 95% </div> </div> -
progress-bar progress-bar-stripedprogress-bar bg-primary progress-bar-striped
<div class="d-flex gap-3 flex-wrap"> <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-primary progress-bar-striped" style="width: 12.5%"> 12.5% </div> </div> <div class="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" style="width: 25%"> 25% </div> </div> <div class="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 37.5%"> 37.5% </div> </div> <div class="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 50%"> 50% </div> </div> <div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 62.5%"> 62.5% </div> </div> <div class="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width: 75%"> 75% </div> </div> <div class="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-light progress-bar-striped progress-bar-animated" style="width: 82.5%"> 82.5% </div> </div> <div class="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" style="width: 95%"> 95% </div> </div> </div> -
progress sizes
<div class="d-flex flex-column gap-3"> <div class="progress h-5"> <div class="progress-bar bg-primary h-5" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> </div> <div class="progress"> <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">This is normal size</div> </div> <div class="progress"> <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">This is normal size</div> </div> <div class="progress h-15"> <div class="progress-bar bg-success h-15" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> height 15px</div> </div> <div class="progress h-15"> <div class="progress-bar bg-info h-15" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> height 15px</div> </div> <div class="progress h-20"> <div class="progress-bar bg-danger h-20" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> height 20px</div> </div> <div class="progress h-25"> <div class="progress-bar bg-warning h-25" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> height 25px</div> </div> </div>
-
text-[color]text-primary
<div class="d-flex flex-wrap gap-2"> <span class="text-primary p-2"> - .text-primary</span> <span class="text-secondary p-2"> - .text-secondary</span> <span class="text-success p-2"> - .text-success</span> <span class="text-danger p-2"> - .text-danger</span> <span class="text-warning p-2"> - .text-warning</span> <span class="text-info p-2"> - .text-info</span> <span class="text-light p-2"> - .text-light</span> <span class="text-dark p-2"> - .text-dark</span> </div> -
link-[color]link-primary
<div class="d-flex flex-wrap gap-2"> <span class="link-primary p-2"> - .link-primary</span> <span class="link-secondary p-2"> - .link-secondary</span> <span class="link-success p-2"> - .link-success</span> <span class="link-danger p-2"> - .link-danger</span> <span class="link-warning p-2"> - .link-warning</span> <span class="link-info p-2"> - .link-info</span> <span class="link-light p-2"> - .link-light</span> <span class="link-dark p-2"> - .link-dark</span> </div> -
txt-bg-[color]txt-bg-primary
<div class="d-flex flex-wrap gap-2"> <span class="txt-bg-primary p-2"> - .txt-bg-primary</span> <span class="txt-bg-secondary p-2"> - .txt-bg-secondary</span> <span class="txt-bg-success p-2"> - .txt-bg-success</span> <span class="txt-bg-danger p-2"> - .txt-bg-danger</span> <span class="txt-bg-warning p-2"> - .txt-bg-warning</span> <span class="txt-bg-info p-2"> - .txt-bg-info</span> <span class="txt-bg-light p-2"> - .txt-bg-light</span> <span class="txt-bg-dark p-2"> - .txt-bg-dark</span> </div> -
text-[option]text-start
<div class="text-lowercase p-2">Text-Lowercase</div> <div class="text-uppercase p-2">Text-Uppercase</div> <div class="text-capitalize p-2">Text-Capitalize</div> <div class="text-center">- Text Align Center</div> <div class="text-start">- Text Align Start</div> <div class="text-end">- Text Align End</div> -
text-d-[option]text-d-underline
<div class="p-2">- Text Decoration<span class="text-d-underline ms-2"> underline </span></div> <div class="p-2">- Text Decoration<span class="text-d-line-through ms-2"> line-through </span></div> <div class="p-2">- Text Decoration<span class="text-d-overline ms-2"> overline</span></div> <div class="p-2">- Text Decoration<span class="text-d-overline-underline ms-2">overline-underline</span></div> <div class="p-2">- Text Decoration<span class="text-d-line-underline ms-2">underline-line-through</span> -
f-fs-[option]f-fs-normal
<div class="p-2">- Font style<span class="f-fs-normal ms-2">Normal</span></div> <div class="p-2">- Font style<span class="f-fs-italic ms-2">Italic</span></div> <div class="p-2">- Font style<span class="f-fs-oblique ms-2">Oblique</span></div> <div class="p-2">- Font style<span class="f-fs-initial ms-2">Initial</span></div> <div class="p-2">- Font style<span class="f-fs-inherit ms-2">Inherit</span></div> -
h1-h6h1-h6
<div class="h1">h1 Fontsize</div> <div class="h2">h2 Fontsize</div> <div class="h3">h3 Fontsize</div> <div class="h4">h4 Fontsize</div> <div class="h5">h5 Fontsize</div> <div class="h6">h6 Fontsize</div> -
f-fw-[weight]f-fw-500
<div class="p-2">- Font weight<span class="f-fw-100 ms-2">f-fw-100* </span></div> <div class="p-2">- Font weight<span class="f-fw-200 ms-2">f-fw-200* </span></div> <div class="p-2">- Font weight<span class="f-fw-300 ms-2">f-fw-300* </span></div> <div class="p-2">- Font weight<span class="f-fw-400 ms-2">f-fw-400* </span></div> <div class="p-2">- Font weight<span class="f-fw-500 ms-2">f-fw-500* </span></div> <div class="p-2">- Font weight<span class="f-fw-600 ms-2">f-fw-600* </span></div> <div class="p-2">- Font weight<span class="f-fw-700 ms-2">f-fw-700* </span></div> <div class="p-2">- Font weight<span class="f-fw-800 ms-2">f-fw-800* </span></div> <div class="p-2">- Font weight<span class="f-fw-900 ms-2">f-fw-900* </span></div> -
f-s-[size]f-s-14
<div class="p-2 f-s-10 ms-2">Size-10 </span></div> <div class="p-2 f-s-12 ms-2">Size-12 </span></div> <div class="p-2 f-s-14 ms-2">Size-14 </span></div> <div class="p-2 f-s-16 ms-2">Size-16 </span></div> <div class="p-2 f-s-18 ms-2">Size-18 </span></div> <div class="p-2 f-s-20 ms-2">Size-20 </span></div> <div class="p-2 f-s-24 ms-2">Size-24 </span></div> <div class="f-s-80 ms-2">Size-80 </span></div> -
pa-[option]pd-0
<div class="row"> <div class="col"> <p class="border pa-16">Padding-16</p> </div> <div class="col"> <p class="border pa-14">Padding-14</p> </div> <div class="col"> <p class="border pa-10">Padding-10</p> </div> <div class="col"> <p class="border pa-8">Padding-8</p> </div> <div class="col"> <p class="border pa-4">Padding-4</p> </div> </div> -
pa-t-[option]pa-t-0
<div class="row"> <div class="col"> <p class="border pa-t-40">Padding-Top-40</p> </div> <div class="col"> <p class="border pa-t-35">Padding-Top-35</p> </div> <div class="col"> <p class="border pa-t-20">Padding-Top-20</p> </div> <div class="col"> <p class="border pa-t-15">Padding-Top-15</p> </div> </div> -
pa-s-[option]pa-s-0
<div class="row"> <div class="col-12"> <p class="border pa-s-40">Padding-Start-40</p> </div> <div class="col-12"> <p class="border pa-s-35">Padding-Start-35</p> </div> <div class="col-12"> <p class="border pa-s-20">Padding-Start-20</p> </div> <div class="col-12"> <p class="border pa-s-15">Padding-Start-15</p> </div> </div> -
pa-b-[option]pa-t-0
<div class="row"> <div class="col"> <p class="border pa-b-40">Padding-Bottom-40</p> </div> <div class="col"> <p class="border pa-b-35">Padding-Bottom-35</p> </div> <div class="col"> <p class="border pa-b-20">Padding-Bottom-20</p> </div> <div class="col"> <p class="border pa-b-15">Padding-Bottom-15</p> </div> </div> -
pa-e-[option]pa-e-0
<div class="row"> <div class="col"> <p class="border pa-e-40">Padding-End-40</p> </div> <div class="col"> <p class="border pa-e-35">Padding-End-35</p> </div> <div class="col"> <p class="border pa-e-20">Padding-End-20</p> </div> <div class="col"> <p class="border pa-e-15">Padding-End-15</p> </div> </div> -
mg-[option]pd-0
<div class="row"> <div class="col-auto mb-2"> <div class="border"> <div class="mg-40 txt-bg-primary">Margin-40</div> </div> </div> <div class="col-auto mb-2"> <div class="border"> <div class="mg-34 txt-bg-dark">Margin-34</div> </div> </div> <div class="col-auto mb-2"> <div class="border"> <div class="mg-30 txt-bg-light">Margin-30</div> </div> </div> <div class="col-auto mb-2"> <div class="border"> <div class="mg-28 txt-bg-info">Margin-28</div> </div> </div> <div class="col-auto mb-2"> <div class="border"> <div class="mg-24 txt-bg-warning">Margin-24</div> </div> </div> <div class="col-auto mb-2"> <div class="border"> <div class="mg-20 txt-bg-danger">Margin-20</div> </div> </div> <div class="col-auto mb-2"> <div class="border"> <div class="mg-14 txt-bg-success">Margin-14</div> </div> </div> <div class="col-auto mb-2"> <div class="border"> <p class="mg-10 txt-bg-secondary">Margin-10</p> </div> </div> <div class="col-auto mb-2"> <div class="border"> <p class="mg-4 txt-bg-primary">Margin-4</p> </div> </div> -
mg-t-[option]mg-t-0
<div class="row"> <div class="col"> <p class="border mg-t-40">margin-Top-40</p> </div> <div class="col"> <p class="border mg-t-35">margin-Top-35</p> </div> <div class="col"> <p class="border mg-t-20">margin-Top-20</p> </div> <div class="col"> <p class="border mg-t-15">margin-Top-15</p> </div> </div> -
mg-s-[option]mg-s-0
<div class="row"> <div class="col-12"> <p class="border mg-s-40">margin-Start-40</p> </div> <div class="col-12"> <p class="border mg-s-35">margin-Start-35</p> </div> <div class="col-12"> <p class="border mg-s-20">margin-Start-20</p> </div> <div class="col-12"> <p class="border mg-s-15">margin-Start-15</p> </div> </div> -
mg-b-[option]mg-t-0
<div class="row"> <div class="col"> <p class="border mg-b-40">margin-Bottom-40</p> </div> <div class="col"> <p class="border mg-b-35">margin-Bottom-35</p> </div> <div class="col"> <p class="border mg-b-20">margin-Bottom-20</p> </div> <div class="col"> <p class="border mg-b-15">margin-Bottom-15</p> </div> </div> -
mg-e-[option]mg-e-0
<div class="row"> <div class="col-12"> <p class="border mg-e-40">margin-End-40</p> </div> <div class="col-12"> <p class="border mg-e-35">margin-End-35</p> </div> <div class="col-12"> <p class="border mg-e-20">margin-End-20</p> </div> <div class="col-12"> <p class="border mg-e-15">margin-End-15</p> </div> </div> -
w-[option]w-50
<div class="w-150 border p-2 mb-2"> w-150 </div> <div class="w-80 border p-2 mb-2"> w-80 </div> <div class="w-60 border p-2 mb-2"> w-60 </div> <div class="w-50 border p-2 mb-2"> w-50 </div> -
h-[option]h-50
<div class="h-150 border p-2 mb-2"> h-150 </div> <div class="h-80 border p-2 mb-2"> h-80 </div> <div class="h-60 border p-2 mb-2"> h-60 </div> <div class="h-50 border p-2 mb-2"> h-50 </div> -
b-[option]border
<div class="app-example"> <div class="border">border</div> <div class="border-t">border-t</div> <div class="border-s">border-s</div> <div class="border-e">border-e</div> <div class="border-b">border-b</div> </div> -
b-1-[color]b-1-primary
<div class="app-example"> <div class="b-1-primary p-2">b-1-primary</div> <div class="b-1-secondary p-2">b-1-secondary</div> <div class="b-1-success p-2">b-1-success</div> <div class="b-1-danger p-2">b-1-danger</div> <div class="b-1-warning p-2">b-1-warning</div> <div class="b-1-info p-2">b-1-info</div> <div class="b-1-light p-2">b-1-light</div> <div class="b-1-dark p-2">b-1-dark</div> </div> -
b-[size]-[color]b-1-primary
<div class="app-example"> <div class="b-1-primary p-2">b-1-primary</div> <div class="b-3-secondary p-2">b-3-secondary</div> <div class="b-5-success p-2">b-5-success</div> <div class="b-7-danger p-2">b-7-danger</div> <div class="b-9-warning p-2">b-9-warning</div> <div class="b-15-info p-2">b-15-info</div> </div> -
b-r-[option]b-r-5
<div class="app-example"> <div class="b-1-secondary b-r-5">b-r-5</div> <div class="b-1-secondary b-r-10">b-r-10</div> <div class="b-1-secondary b-r-15">b-r-15</div> <div class="b-1-secondary b-r-20">b-r-20</div> <div class="b-1-secondary b-r-25">b-r-25</div> <div class="b-1-secondary b-r-30">b-r-30</div> </div>
-
app-divider-vapp-divider-v
<div class="app-divider-v"></div> -
app-divider-v dottedapp-divider-v dotted
<div class="app-divider-v dotted"></div> -
app-divider-v dashedapp-divider-v dashed
<div class="app-divider-v dashed"></div> -
app-divider-happ-divider-h
<div class="app-divider-h"></div> -
app-divider-h dottedapp-divider-h dotted
<div class="app-divider-h dotted"></div> -
app-divider-h dashedapp-divider-h dashed
<div class="app-divider-h dashed"></div> -
app-divider-v justify-content-startapp-divider-v
<div class="app-divider-v"> <p> justify-content-start </p> </div> -
app-divider-v justify-content-centerapp-divider-v justify-content-center
<div class="app-divider-v justify-content-center"> <p> justify-content-center </p> </div> -
app-divider-v justify-content-endapp-divider-v justify-content-end
<div class="app-divider-v justify-content-end"> <p> justify-content-end </p> </div> -
app-divider-h align-items-startapp-divider-h
<div class="card h-100"> <div class="card-body divider-body d-flex"> <div class="app-divider-h"> <p>Or</p> </div> </div> </div> -
app-divider-h align-items-centerapp-divider-h align-items-center
<div class="card h-100"> <div class="card-body divider-body d-flex"> <div class="app-divider-h align-items-center"> <p>Or</p> </div> </div> </div> -
app-divider-h align-items-endapp-divider-h align-items-end
<div class="card h-100"> <div class="card-body divider-body d-flex"> <div class="app-divider-h align-items-end"> <p>Or</p> </div> </div> </div> -
app-divider-v primaryapp-divider-v primary
<div class="app-divider-v primary"> </div> -
app-divider-v secondaryapp-divider-v secondary
<div class="app-divider-v secondary"> </div> -
app-divider-v successapp-divider-v success
<div class="app-divider-v success"> </div> -
app-divider-v dangerapp-divider-v danger
<div class="app-divider-v danger"> </div> -
app-divider-v warningapp-divider-v warning
<div class="app-divider-v warning"> </div> -
app-divider-v infoapp-divider-v info
<div class="app-divider-v info"> </div> -
app-divider-v lightapp-divider-v light
<div class="app-divider-v light"> </div> -
app-divider-v darkapp-divider-v dark
<div class="app-divider-v dark"> </div> -
app-divider-h primaryapp-divider-h primary
<div class="app-divider-h primary"> </div> -
app-divider-h secondaryapp-divider-h secondary
<div class="app-divider-h secondary"> </div> -
app-divider-h successapp-divider-h success
<div class="app-divider-h success"> </div> -
app-divider-h dangerapp-divider-h danger
<div class="app-divider-h danger"> </div> -
app-divider-h warningapp-divider-h warning
<div class="app-divider-h warning"> </div> -
app-divider-h infoapp-divider-h info
<div class="app-divider-h info"> </div> -
app-divider-h lightapp-divider-h light
<div class="app-divider-h light"> </div> -
app-divider-h darkapp-divider-h dark
<div class="app-divider-h dark"> </div>
-
ribbon ribbon-leftribbon ribbon-left ribbon-primary
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="ribbon ribbon-left ribbon-primary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="ribbon ribbon-left ribbon-secondary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="ribbon ribbon-left ribbon-success"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-danger-500"> <div class="ribbon ribbon-left ribbon-danger"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-warning-500"> <div class="ribbon ribbon-left ribbon-warning"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-info-500"> <div class="ribbon ribbon-left ribbon-info"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-light-500"> <div class="ribbon ribbon-left ribbon-light"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-dark-500"> <div class="ribbon ribbon-left ribbon-dark"> Ribbon </div> </div> </div> -
cross-shadow-ribbon cross-leftcross-shadow-ribbon cross-left ribbon-primary
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="cross-shadow-ribbon cross-left ribbon-primary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="cross-shadow-ribbon cross-left ribbon-secondary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="cross-shadow-ribbon cross-left ribbon-success"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-danger-500"> <div class="cross-shadow-ribbon cross-left ribbon-danger"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-warning-500"> <div class="cross-shadow-ribbon cross-left ribbon-warning"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-info-500"> <div class="cross-shadow-ribbon cross-left ribbon-info"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-light-500"> <div class="cross-shadow-ribbon cross-left ribbon-light"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-dark-500"> <div class="cross-shadow-ribbon cross-left ribbon-dark"> Ribbon </div> </div> </div> -
ribbon-shape shape-leftribbon-shape shape-left ribbon-primary
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="ribbon-shape shape-left ribbon-primary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="ribbon-shape shape-left ribbon-secondary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="ribbon-shape shape-left ribbon-success"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-danger-500"> <div class="ribbon-shape shape-left ribbon-danger"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-warning-500"> <div class="ribbon-shape shape-left ribbon-warning"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-info-500"> <div class="ribbon-shape shape-left ribbon-info"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-light-500"> <div class="ribbon-shape shape-left ribbon-light"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-dark-500"> <div class="ribbon-shape shape-left ribbon-dark"> Ribbon </div> </div> </div> -
arrow-ribbon arrow-leftarrow-ribbon arrow-left ribbon-primary
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="arrow-ribbon arrow-left ribbon-primary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="arrow-ribbon arrow-left ribbon-secondary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="arrow-ribbon arrow-left ribbon-success"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-danger-500"> <div class="arrow-ribbon arrow-left ribbon-danger"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-warning-500"> <div class="arrow-ribbon arrow-left ribbon-warning"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-info-500"> <div class="arrow-ribbon arrow-left ribbon-info"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-light-500"> <div class="arrow-ribbon arrow-left ribbon-light"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-dark-500"> <div class="arrow-ribbon arrow-left ribbon-dark"> Ribbon </div> </div> </div> -
ribbon-side side-leftribbon-side side-left ribbon-primary
<div class="d-flex gap-4 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="ribbon-side side-left ribbon-primary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="ribbon-side side-left ribbon-secondary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="ribbon-side side-left ribbon-success"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-danger-500"> <div class="ribbon-side side-left ribbon-danger"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-warning-500"> <div class="ribbon-side side-left ribbon-warning"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-info-500"> <div class="ribbon-side side-left ribbon-info"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-light-500"> <div class="ribbon-side side-left ribbon-light"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-dark-500"> <div class="ribbon-side side-left ribbon-dark"> Ribbon </div> </div> </div> -
ribbon-top top-leftribbon-top top-left ribbon-primary
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="ribbon-top top-left ribbon-primary"> <i class="fa-solid fa-gift fa-fw"></i> </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="ribbon-top top-left ribbon-secondary"> <i class="fa-solid fa-gift fa-fw"></i> </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="ribbon-top top-left ribbon-success"> <i class="fa-solid fa-gift fa-fw"></i> </div> </div> <div class="ribbon-box w-120 h-120 bg-danger-500"> <div class="ribbon-top top-left ribbon-danger"> <i class="fa-solid fa-gift fa-fw"></i> </div> </div> <div class="ribbon-box w-120 h-120 bg-warning-500"> <div class="ribbon-top top-left ribbon-warning"> <i class="fa-solid fa-gift fa-fw"></i> </div> </div> <div class="ribbon-box w-120 h-120 bg-info-500"> <div class="ribbon-top top-left ribbon-info"> <i class="fa-solid fa-gift fa-fw"></i> </div> </div> <div class="ribbon-box w-120 h-120 bg-light-500"> <div class="ribbon-top top-left ribbon-light"> <i class="fa-solid fa-gift fa-fw"></i> </div> </div> <div class="ribbon-box w-120 h-120 bg-dark-500"> <div class="ribbon-top top-left ribbon-dark"> <i class="fa-solid fa-gift fa-fw"></i> </div> </div> </div> -
circle-ribbon circle-leftcircle-ribbon circle-left ribbon-primary
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="circle-ribbon circle-left ribbon-primary"> 50% </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="circle-ribbon circle-left ribbon-secondary"> 50% </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="circle-ribbon circle-left ribbon-success"> 50% </div> </div> <div class="ribbon-box w-120 h-120 bg-danger-500"> <div class="circle-ribbon circle-left ribbon-danger"> 50% </div> </div> <div class="ribbon-box w-120 h-120 bg-warning-500"> <div class="circle-ribbon circle-left ribbon-warning"> 50% </div> </div> <div class="ribbon-box w-120 h-120 bg-info-500"> <div class="circle-ribbon circle-left ribbon-info"> 50% </div> </div> <div class="ribbon-box w-120 h-120 bg-light-500"> <div class="circle-ribbon circle-left ribbon-light"> 50% </div> </div> <div class="ribbon-box w-120 h-120 bg-dark-500"> <div class="circle-ribbon circle-left ribbon-dark"> 50% </div> </div> </div> -
ribbon file-leftribbon file-left ribbon-primary
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-file w-120 h-120 bg-primary-500"> <div class="ribbon file-left ribbon-primary"> 25% </div> </div> <div class="ribbon-file w-120 h-120 bg-secondary-500"> <div class="ribbon file-left ribbon-secondary"> 25% </div> </div> <div class="ribbon-file w-120 h-120 bg-success-500"> <div class="ribbon file-left ribbon-success"> 25% </div> </div> <div class="ribbon-file w-120 h-120 bg-danger-500"> <div class="ribbon file-left ribbon-danger"> 25% </div> </div> <div class="ribbon-file w-120 h-120 bg-warning-500"> <div class="ribbon file-left ribbon-warning"> 25% </div> </div> <div class="ribbon-file w-120 h-120 bg-info-500"> <div class="ribbon file-left ribbon-info"> 25% </div> </div> <div class="ribbon-file w-120 h-120 bg-light-500"> <div class="ribbon file-left ribbon-light"> 25% </div> </div> <div class="ribbon-file w-120 h-120 bg-dark-500"> <div class="ribbon file-left ribbon-dark"> 25% </div> </div> </div> -
box-ribbon box-leftribbon file-left ribbon-primary
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="box-ribbon box-left"> <div class="ribbonbox ribbon-primary"> Box </div> </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="box-ribbon box-left"> <div class="ribbonbox ribbon-secondary"> Box </div> </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="box-ribbon box-left"> <div class="ribbonbox ribbon-success"> Box </div> </div> </div> <div class="ribbon-box w-120 h-120 bg-danger-500"> <div class="box-ribbon box-left"> <div class="ribbonbox ribbon-danger"> Box </div> </div> </div> <div class="ribbon-box w-120 h-120 bg-warning-500"> <div class="box-ribbon box-left"> <div class="ribbonbox ribbon-warning"> Box </div> </div> </div> <div class="ribbon-box w-120 h-120 bg-info-500"> <div class="box-ribbon box-left"> <div class="ribbonbox ribbon-info"> Box </div> </div> </div> <div class="ribbon-box w-120 h-120 bg-light-500"> <div class="box-ribbon box-left"> <div class="ribbonbox ribbon-light"> Box </div> </div> </div> <div class="ribbon-box w-120 h-120 bg-dark-500"> <div class="box-ribbon box-left"> <div class="ribbonbox ribbon-dark"> Box </div> </div> </div> </div> -
ribbon ribbon-[position]
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="ribbon ribbon-right ribbon-primary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="ribbon ribbon-left-bottom ribbon-secondary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="ribbon ribbon-right-bottom ribbon-success"> Ribbon </div> </div> </div> -
ribbon-shape shape-[position]
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="ribbon-shape shape-right ribbon-primary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="ribbon-shape shape-left-bottom ribbon-secondary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="ribbon-shape shape-right-bottom ribbon-success"> Ribbon </div> </div> </div> -
arrow-ribbon arrow-[position]
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="arrow-ribbon arrow-right ribbon-primary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="arrow-ribbon arrow-left-bottom ribbon-secondary"> Ribbon </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="arrow-ribbon arrow-right-bottom ribbon-success"> Ribbon </div> </div> </div> -
ribbon-top top-[position]
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="ribbon-top top-right ribbon-primary"> <i class="fa-solid fa-gift fa-fw"></i> </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="ribbon-top top-left-bottom ribbon-secondary"> <i class="fa-solid fa-gift fa-fw"></i> </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="ribbon-top top-right-bottom ribbon-success"> <i class="fa-solid fa-gift fa-fw"></i> </div> </div> </div> -
ribbon-side side-[position]
<div class="d-flex gap-4 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="ribbon-side side-right ribbon-primary"> Side </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="ribbon-side side-left-bottom ribbon-secondary"> Side </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="ribbon-side side-right-bottom ribbon-success"> Side </div> </div> </div> -
cross-shadow-ribbon cross-[position]
<div class="d-flex gap-4 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="cross-shadow-ribbon cross-right ribbon-primary"> Side </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="cross-shadow-ribbon cross-left-bottom ribbon-secondary"> Side </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="cross-shadow-ribbon cross-right-bottom ribbon-success"> Side </div> </div> </div> -
circle-ribbon circle-[position]
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="circle-ribbon circle-right ribbon-primary"> 25% </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="circle-ribbon circle-left-bottom ribbon-secondary"> 25% </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="circle-ribbon circle-right-bottom ribbon-success"> 25% </div> </div> </div> -
ribbon file-[position]
<div class="d-flex gap-2 flex-wrap"> <div class="ribbon-file w-120 h-120 bg-primary-500"> <div class="ribbon file-right ribbon-primary"> 10% </div> </div> <div class="ribbon-file w-120 h-120 bg-secondary-500"> <div class="ribbon file-left-bottom ribbon-secondary"> 10% </div> </div> <div class="ribbon-file w-120 h-120 bg-success-500"> <div class="ribbon file-right-bottom ribbon-success"> 10% </div> </div> </div> -
box-ribbon box-[position]
<div class="d-flex gap-3 flex-wrap"> <div class="ribbon-box w-120 h-120 bg-primary-500"> <div class="box-ribbon box-right"> <div class="ribbonbox ribbon-primary"> Box </div> </div> </div> <div class="ribbon-box w-120 h-120 bg-secondary-500"> <div class="box-ribbon box-left-bottom"> <div class="ribbonbox ribbon-secondary"> Box </div> </div> </div> <div class="ribbon-box w-120 h-120 bg-success-500"> <div class="box-ribbon box-right-bottom"> <div class="ribbonbox ribbon-success"> Box </div> </div> </div> </div>
Code