Table Of Content

Bootstrap Badges Tutorial

View more Tutorials:

1- Bootstrap Badge

Badge (Huy hiệu) là một thành phần giao diện nhỏ, nó thường được sử dụng để trang trí cho một thành phần nào đó. Dưới đây là một vài hình ảnh minh họa Badge được sử dụng trong trang.
Bootstrap applies the  .badge to a tage to create a Badge. A few additional classes such as   .badge-primary, .badge-secondary, .badge-danger,.. help to create the background color of   Badge, you can use them in the suitable context.
  • badge-primary
  • badge-secondary
  • badge-success
  • badge-danger
  • badge-warning
  • badge-info
  • badge-light
  • badge-dark
  • badge-link
Example of using the  Badge to decorate Links:
Link with Badge
<a href="#">News <span class="badge badge-primary">5</span></a><br>
<a href="#">Comments <span class="badge badge-secondary">10</span></a><br>
<a href="#">Updates <span class="badge badge-danger">2</span></a>
See the full example:
badge-link-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Badge</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4 class="mb-3">Link with Badge</h4>

         <a href="#">News <span class="badge badge-primary">5</span></a><br>
         <a href="#">Comments <span class="badge badge-secondary">10</span></a><br>
         <a href="#">Updates <span class="badge badge-danger">2</span></a>

      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>
By default, the  Badges are set up size front size equal to 75% of the Font size of parent element.
<h1>Example heading H1 <span class="badge badge-secondary">New</span></h1>
<h2>Example heading H2 <span class="badge badge-secondary">New</span></h2>
<h3>Example heading H3 <span class="badge badge-secondary">New</span></h3>
<h4>Example heading H4 <span class="badge badge-secondary">New</span></h4>
<h5>Example heading H5 <span class="badge badge-secondary">New</span></h5>
<h6>Example heading H6 <span class="badge badge-secondary">New</span></h6>
Badge is alsoe used to decorate Button. For example, for a Button, users click on this  Button to download file. The  Badge is used to display total times which the file is downloaded by users.
<button class="btn btn-primary">
  Download <span class="badge badge-light">5</span>
</button>

2- Badge (.badge-pill)

Use the .badge-pill class to help your  Badge rounder in 4 angles. The following figures indicate difference between a normal  Badge and a Badge using the  .badge-pill ​​​​​​​class:
.badge .badge-pill
<h1>
   News
   <span class="badge badge-primary">100</span>
</h1>
<h1>
   Comments
   <span class="badge badge-pill badge-primary">20K</span>
</h1>

View more Tutorials: