Bootstrap 5 Onay Rozeti

Rozetler

Rozetler (Badges), içeriklere ek bilgi eklemek için kullanılır:

içinde <span> elemanlarında .badge Sınıflar ve bağlam sınıfları (örneğin .bg-secondary) Dikdörtgen rozetleri oluşturmak için. Rozetler, eğer varsa, ebeveyn elemanın boyutlarına uyacak şekilde ölçeklenecektir:

Örnek

<h1>Örnek başlık <span class="badge bg-secondary">Yeni</span></h1>
<h2>Örnek başlık <span class="badge bg-secondary">Yeni</span></h2>
<h3>Örnek başlık <span class="badge bg-secondary">Yeni</span></h3>
<h4>Örnek başlık <span class="badge bg-secondary">Yeni</span></h4>
<h5>Örnek başlık <span class="badge bg-secondary">Yeni</span></h5>
<h6>Örnek başlık <span class="badge bg-secondary">Yeni</span></h6>

Kendi Kendine Deneyin

Bağlam rozetleri

Herhangi bir bağlam sınıfını kullanarak:.bg-*) Renk değiştirmek için:

Örnek

<span class="badge bg-primary">Ana</span>
<span class="badge bg-secondary">İkincil</span>
<span class="badge bg-success">Başarı</span>
<span class="badge bg-danger">Tehlike</span>
<span class="badge bg-warning">Uyarı</span>
<span class="badge bg-info">Bilgi</span>
<span class="badge bg-light">Açık</span>
<span class="badge bg-dark">Koyu</span>

Kendi Kendine Deneyin

Kapsül rozet

Kullanım .rounded-pill Rozetleri daha yuvarlak hale getiren sınıf:

Örnek

<span class="badge rounded-pill bg-primary">Ana</span>
<span class="badge rounded-pill bg-secondary">İkincil</span>
<span class="badge rounded-pill bg-success">Başarı</span>
<span class="badge rounded-pill bg-danger"> Tehlike</span>
<span class="badge rounded-pill bg-warning">Uyarı</span>
<span class="badge rounded-pill bg-info">Bilgi</span>
<span class="badge rounded-pill bg-light">Açık</span>
<span class="badge rounded-pill bg-dark">Koyu</span>

Kendi Kendine Deneyin

Rozet içeren bir element

Düğme içinde rozet kullanma örneği:

Örnek

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

Kendi Kendine Deneyin