Bootstrap Badges and Labels

Bootstrap Badges and Labels
Bootstrap Badges and Labels
Bootstrap Badges and Labels

Badges can numeric number and text, we can use Badges in Buttons and Heading and anywhere in our website, Use the .badge class with<span>html  elements to create badges:

Bootstrap Badges in Headings


        <h1>Bootstrap Badges heading <span class="badge badge-secondary">New</span></h1>
        <h2>Bootstrap Badges heading <span class="badge badge-secondary">New</span></h2>

Bootstrap Badges in Buttons

 
         <button type="button" class="btn btn-primary">
            SCHAUHAN.IN <span class="badge badge-light">4</span>
         </button>
         
         <button type="button" class="btn btn-danger">
            SCHAUHAN.IN <span class="badge badge-light">2</span>
         </button>
         
         <button type="button" class="btn btn-danger">
            SCHAUHAN.IN <span class="badge badge-light">2</span>
         </button>
         
          <button type="button" class="btn btn-info">
            SCHAUHAN.IN <span class="badge badge-light">6</span>
         </button>

Bootstrap Badges in Menu

         <ul>
           <li><a href="#">Articles <span class="badge">5</span></a></li>
           <li><a href="#">Posts <span class="badge">3</span></a></li>
           <li><a href="#">Pages <span class="badge">6</span></a></li>
         </ul>

Leave a Reply

avatar
  Subscribe  
Notify of