Bootstrap 5 huy hiệu

徽章

徽章（Badges）sử dụng để thêm thông tin bổ sung vào nội dung:

trong <span> sử dụng trong phần tử .badge và lớp ngữ cảnh (như

Mẫu

<h1>Chủ đề ví dụ <span class="badge bg-secondary">Mới</span></h1>
<h2>Chủ đề ví dụ <span class="badge bg-secondary">Mới</span></h2>
<h3>Chủ đề ví dụ <span class="badge bg-secondary">Mới</span></h3>
<h4>Chủ đề ví dụ <span class="badge bg-secondary">Mới</span></h4>
<h5>Chủ đề ví dụ <span class="badge bg-secondary">Mới</span></h5>
<h6>Chủ đề ví dụ <span class="badge bg-secondary">Mới</span></h6>

Thử ngay

徽章 ngữ cảnh

Vui lòng sử dụng bất kỳ lớp ngữ cảnh nào (.bg-*) Thay đổi màu徽章：

Mẫu

<span class="badge bg-primary">Chính</span>
<span class="badge bg-secondary">Tầm quan trọng thứ hai</span>
<span class="badge bg-success">Thành công</span>
<span class="badge bg-danger">Rủi ro</span>
<span class="badge bg-warning">Cảnh báo</span>
<span class="badge bg-info">Thông tin</span>
<span class="badge bg-light">Trắng</span>
<span class="badge bg-dark">Đen</span>

Thử ngay

Huy hiệu胶囊

Sử dụng .rounded-pill Lớp làm huy hiệu tròn hơn:

Mẫu

<span class="badge rounded-pill bg-primary">Chính</span>
<span class="badge rounded-pill bg-secondary">Tầm quan trọng thứ hai</span>
<span class="badge rounded-pill bg-success">Thành công</span>
<span class="badge rounded-pill bg-danger">Rủi ro</span>
<span class="badge rounded-pill bg-warning">Cảnh báo</span>
<span class="badge rounded-pill bg-info">Thông tin</span>
<span class="badge rounded-pill bg-light">Trắng</span>
<span class="badge rounded-pill bg-dark">Đen</span>

Thử ngay

Huy hiệu trong phần tử

Ví dụ sử dụng huy hiệu trong nút:

Mẫu

<button type="button" class="btn btn-primary">
  Tin nhắn <span class="badge bg-danger">4</span>
</button>

Thử ngay