Odznaki Bootstrap 5

Odznaki

Odznaki (Badges) są używane do dodawania dodatkowych informacji do treści:

w <span> w elementach używaj .badge klasy i klasy kontekstowe (np. .bg-secondary) do utworzenia prostokątnej odznaki. Proszę zauważyć, że odznaka będzie skalowana, aby pasować do rozmiaru elementu nadrzędnego (jeśli istnieje):

Przykład

<h1>Przykładowy nagłówek <span class="badge bg-secondary">Nowy</span></h1>
<h2>Przykładowy nagłówek <span class="badge bg-secondary">Nowy</span></h2>
<h3>Przykładowy nagłówek <span class="badge bg-secondary">Nowy</span></h3>
<h4>Przykładowy nagłówek <span class="badge bg-secondary">Nowy</span></h4>
<h5>Przykładowy nagłówek <span class="badge bg-secondary">Nowy</span></h5>
<h6>Przykładowy nagłówek <span class="badge bg-secondary">Nowy</span></h6>

Spróbuj sam

Odznaki kontekstowe

Użyj dowolnej klasy kontekstowej (.bg-*) Zmień kolor odznaki:

Przykład

<span class="badge bg-primary">Główny</span>
<span class="badge bg-secondary">Drugi</span>
<span class="badge bg-success">Sukces</span>
<span class="badge bg-danger">Niebezpieczeństwo</span>
<span class="badge bg-warning">Ostrzeżenie</span>
<span class="badge bg-info">Informacyjna</span>
<span class="badge bg-light">Jasna</span>
<span class="badge bg-dark">Ciemna</span>

Spróbuj sam

Odznaka kapsułkowa

Użycie .rounded-pill Klasa sprawia, że odznaka jest bardziej zaokrąglona:

Przykład

<span class="badge rounded-pill bg-primary">Główny</span>
<span class="badge rounded-pill bg-secondary">Drugi plan</span>
<span class="badge rounded-pill bg-success">Sukces</span>
<span class="badge rounded-pill bg-danger">Niebezpieczeństwo</span>
<span class="badge rounded-pill bg-warning">Ostrzeżenie</span>
<span class="badge rounded-pill bg-info">Informacyjna</span>
<span class="badge rounded-pill bg-light">Jasna</span>
<span class="badge rounded-pill bg-dark">Ciemna</span>

Spróbuj sam

Odznaka w elemencie

Przykład użycia odznaki w przycisku:

Przykład

<button type="button" class="btn btn-primary">
  Wiadomość <span class="badge bg-danger">4</span>
</button>

Spróbuj sam