PHP Bootstrap

PHP Bootstrap Template
Take $3 OFF, with coupon code "WINTERSALE"
Buy Now - Sale Price: $10
Credit Cards

Badges & Labels -PHP Bootstrap Template - Purchase and download files instantly!!

Badges & Labels with PHP Bootstrap Template!

Use these samples to create inline labels and badges. Using these labels and badges are great for indicating important information on your website.


Navigation Bars || Column Grids || Buttons || Badges & Labels || Progress Bars


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

Ready to get started, or have questions? Reach out to us today!

Contact Us