Start Here Basic Page Setup || Navigation Bars || Column Grids || Buttons || Modal Generators || Bootstrap Icons || Badges & Labels || Progress Bars || Themes || Plugins
Using these badges and labels are great for indicating important information on your website. Badges are used to add small numerical values or labels to count items, indicate statuses, or highlight key information. They can be attached to links, buttons, or other components to provide context.
<button type="button" class="btn btn-secondary btn-sm"> Badge </button>
Use badges to inform events
<button type="button" class="btn btn-primary position-relative"> Visitors <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary"> 25 </span> </button> <button type="button" class="btn btn-warning position-relative"> Page Views <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary"> 112 </span> </button> <button type="button" class="btn btn-danger position-relative"> Orders To Date <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary"> 4 </span> </button>
Information Labels
<button type="button" class="btn btn-primary btn-sm"> Primary </button> <button type="button" class="btn btn-secondary btn-sm"> Secondary </button> <button type="button" class="btn btn-success btn-sm"> Success </button> <button type="button" class="btn btn-danger btn-sm"> Danger </button> <button type="button" class="btn btn-warning btn-sm"> Warning </button> <button type="button" class="btn btn-info btn-sm"> Info </button> <button type="button" class="btn btn-light btn-sm"> Light </button> <button type="button" class="btn btn-dark btn-sm">Dark </button>
Various Sizes
<button type="button" class="btn btn-primary btn-sm"><h1> Primary </h1></button> <button type="button" class="btn btn-secondary btn-sm"><h2> Secondary </h2></button> <button type="button" class="btn btn-success btn-sm"><h3> Success </h3></button> <button type="button" class="btn btn-danger btn-sm"><h4> Danger </h4></button> <button type="button" class="btn btn-warning btn-sm"><h5> Warning </h5></button> <button type="button" class="btn btn-info btn-sm"><h6> Info </h6></button>
Add A Indicator To A Button
<button type="button" class="btn btn-primary position-relative"> Profile <span class="position-absolute top-0 start-100 translate-middle p-2 bg-info border border-light rounded-circle"> </span> </button> <br /><br /> <button type="button" class="btn btn-secondary position-relative"> Information <span class="position-absolute top-0 start-100 translate-middle p-2 bg-warning border border-light rounded-circle"> </span> </button> <br /><br /> <button type="button" class="btn btn-success position-relative"> Account <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"> </span> </button>
Outline Buttons
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>