Start Here Basic Page Setup || Navigation Bars || Column Grids || Buttons || Modal Generators || Bootstrap Icons || Badges & Labels || Progress Bars
Badges & Labels with PHP Bootstrap 5!
Use these samples to create inline labels and badges. Using these labels and badges are great for indicating important information on your website.
<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>