Create responsive website with Bootstrap

Bootstrap tutorial includes all topics such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.

Bootstrap Badges & Labels


Bootstrap Badges are numerical indicators used to show that how many items are associated with the specific link. Badges are used to highlight new or unread items.

Use the .badge class within <span> elements to create badges


<a href="#">Blogs <span class="badge">5</span></a><br>
<a href="#">News <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

You can also use badges inside other elements, such as buttons.
<button type="button" class="btn btn-primary">Blogs <span class="badge">7</span></button>
<button type="button" class="btn btn-success">News <span class="badge">7</span></button>
<button type="button" class="btn btn-danger">Comments <span class="badge">7</span></button>


Bootstrap labels are used to specify the additional information about something like offering counts, tips, or other makeup for pages.

Use the .label class, followed by one of the six contextual classes

  • .label-default
  • .label-primary
  • .label-success
  • .label-info
  • .label-warning
  • .label-danger
<span class = "label label-success">Success Label</span>
<span class = "label label-info">Info Label</span>
<span class = "label label-danger">Danger Label</span>
<span class = "label label-default">Default Label</span>
<span class = "label label-primary">Primary Label</span>
<span class = "label label-warning">Warning Label</span>