Labels and Badges of Bootstrap

Bootstrap labels-:

Labels are helpful for offering counts, tips, or other markup for pages. To display labels you can use class like- .labels shown in the following example −


<h1>Example Heading <span class = “label label-default”>Label</span></h1>

<h2>Example Heading <span class =” label label- default”>Label</span></h2>

<h3>Example Heading <span class = “label label- default”>Label</span></h3>

<h4>Example Heading <span class = “label label- default”>Label</span></h4>


Example Heading Label

Example Heading Label

Example Heading Label

Example Heading Label

You can change the appearance of the labels using the modifier classes such as,label-default, label-primary, label-success, label-info, label-warning, label-danger as shown in the following example −:
<span class= "label label-default">Default Label</span>
      <span class= "label label-primary">Primary Label</span>
      <span class= "label label-success">Success Label</span>
      <span class= "label label-info">Info Label</span>
      <span class= "label label-warning">Warning Label</span>
      <span class= "label label-danger">Danger Label</span>

 Bootstrap Badges

Badges are identical to labels; the primary difference is that the corners are more rounded.

Badges are commonly used to highlight new or unread items. To using badges just adds span= “badge” to links, Bootstrap navs, and more

Example-:Mailbox 50

If there are no new or unread items, badges will simply collapse via CSS’s :empty selector, provided no content exists within.Creating Badges with Bootstrap

 Creating Badges with Bootstrap

Badges are commonly used to indicate some valuable information on the web pages such as important heading, warning messages, notification counter, etc.


<span class="badge badge-pill badge-primary">Primary</span>
      <span class="badge badge-pill badge-secondary">Secondary</span>
      <span class="badge badge-pill badge-success">Success</span>
      <span class="badge badge-pill badge-danger">Danger</span>
      <span class="badge badge-pill badge-warning">Warning</span>
      <span class="badge badge-pill badge-info">Info</span>
      <span class="badge badge-pill badge-dark">Dark</span>
      <span class="badge badge-pill badge-light">Light</span>


Primary Secondary Success Danger Warning Info Dark Light

 Active Nav States

You can spot badges in active states of pill and list navigations. You can achieve this by placing to active links, as demonstrated in the following example-:



Bootstrap 4 Badges inside Nav .bs-example{ margin: 20px; }

Bootstrap 4 Badges inside Nav .bs-example{ margin: 20px; }

 Showing Counter with Badges

You can also use badges as part of links or buttons to provide a counter, such as number of received or unread messages, number of notifications etc. They’re most commonly found in email clients, application dashboards, social networking websites, etc. Here’s an example:-



Leave a Reply

Your email address will not be published. Required fields are marked *