Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Badges được sử dụng để thêm thông tin bổ sung cho bất kỳ nội dung nào. Sử dụng class .badge (hay .badge-secondary) trong thẻ <span>. Lưu ý rằng badges thay đổi kích thước để phù hợp với kích thước của phần tử cha (nếu có):

Ví dụ

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Contextual Badges

Sử dụng các class (.badge-*) để thay đổi màu badge:

Ví dụ

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

Pill Badges

Sử dụng class .badge-pill để làm tròn viền badges:

Ví dụ

<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-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Badge bên trong một thành phần khác

Một ví dụ về việc sử dụng Badge bên trong một button:

Ví dụ

<button type="button" class="btn btn-primary">
  Messages <span class="badge badge-light">4</span>
</button>