Badge là các đối tượng hiện thị giống như các nhãn, các tag, một hộp nhỏ chứa nội dung để người dùng chú ý. Ví dụ sau tiêu đề bài viết có một dòng chữ thông báo là bài viết mới, bên cạnh giỏ hàng hiện thị số lượng sản phẩm ...
Sử dụng lớp .badge sau đó là các lớp định dạng .badge-* (.badge-primary, .badge-secondary ...) để tạo ra một Badge. Thường sử dụng .badge cho các phần tử hiện thị dạng inline như a, span
<h3>Tiêu đề một bài viết
<span class="badge badge-danger">mới</span>
</h3>
<button class="btn btn-warning">Tin nhắn mới
<span class="badge badge-danger">90</span>
</button>
<p>
<span class="badge badge-primary">1</span>
<span class="badge badge-secondary">2</span>
<span class="badge badge-success">3</span>
<span class="badge badge-danger">4</span>
<span class="badge badge-warning">5</span>
<span class="badge badge-info">6</span>
<span class="badge badge-light">7</span>
<span class="badge badge-dark">8</span>
</p>
Tiêu đề một bài viết mới
1 2 3 4 5 6 7 8
Nếu muốn các badge góc bo tròn hơn nữa thì thêm vào .badge-pill
<p>
<span class="badge badge-pill badge-primary">1</span>
<span class="badge badge-pill badge-secondary">2</span>
<span class="badge badge-pill badge-success">3</span>
<span class="badge badge-pill badge-danger">4</span>
<span class="badge badge-pill badge-warning">5</span>
<span class="badge badge-pill badge-info">6</span>
<span class="badge badge-pill badge-light">7</span>
<span class="badge badge-pill badge-dark">8</span>
</p>
1 2 3 4 5 6 7 8
Khi sử dụng .badge cho các link (phần tử <a> thì các link đó có hiệu ứng khi hover cho biết đang focus trên nó
<p>
<a href="#" class="badge badge-primary">Link 1</a>
<a href="#" class="badge badge-secondary">Link 2</a>
<a href="#" class="badge badge-success">Link 3</a>
<a href="#" class="badge badge-danger">Link 4</a>
<a href="#" class="badge badge-warning">Link 5</a>
<a href="#" class="badge badge-info">Link 6</a>
<a href="#" class="badge badge-light">Link 7</a>
<a href="#" class="badge badge-dark">Link 8</a>
</p>
