PHP Bootstrap

PHP

Bootstrap

Coding

Hosting

PHP Bootstrap

Web Design, Hosting & Domain Services!


AI CODE GENERATOR

Generate Bootstrap Code In Seconds

Create responsive layouts, forms, navigation menus, cards, grids, and UI components with our free AI-powered code generator.

Launch Generator →
Find Your Perfect Domain Name:
Build It Here. Host It Here. Launch It Everywhere!

Badges & Labels

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>