Rozetler

Rozetler, göreli yazı tipi boyutlandırması ve em birimleri kullanılarak hemen üst öğenin boyutuyla eşleşecek şekilde ölçeklenir.

Başlıklar

h1. v5 Başlık Etiket

h2. v5 Başlık Etiket

h3. v5 Başlık Etiket

h4. v5 Başlık Etiket

h5. v5 Başlık Etiket

h6. v5 Başlık Etiket

<h1>h1. v5 Başlık <span class="badge bg-primary">Etiket</span></h1>

<h2>h2. v5 Başlık <span class="badge bg-primary">Etiket</span></h2>

<h3>h3. v5 Başlık <span class="badge bg-primary">Etiket</span></h3>

<h4>h4. v5 Başlık <span class="badge bg-primary">Etiket</span></h4>

<h5>h5. v5 Başlık <span class="badge bg-primary">Etiket</span></h5>

<h6>h6. v5 Başlık <span class="badge bg-primary">Etiket</span></h6>

Konumlandırma

Bir etiketi elementin köşesine yerleştirmek için önceden tanımlanmış classları kullanabilirsiniz.

Sepet +9

<div class="bg-primary text-white position-relative p-1 border-round">

Sepet <span class="position-absolute top-0 left-100 translate-middle badge bg-dark">+9</span>

</div>

Arka plan renkleri

PrimarySecondarySuccessDangerWarningInfoLightDark

<span class="badge bg-primary">Primary</span>

<span class="badge bg-secondary text-black">Secondary</span>

<span class="badge bg-success">Success</span>

<span class="badge bg-danger">Danger</span>

<span class="badge bg-warning text-dark">Warning</span>

<span class="badge bg-info text-dark">Info</span>

<span class="badge bg-light text-dark">Light</span>

<span class="badge bg-dark">Dark</span>

Köşeler oval

PrimarySecondarySuccessDangerWarningInfoLightDark

<span class="badge rounded-pill bg-primary">Primary</span>

<span class="badge rounded-pill text-black bg-secondary">Secondary</span>

<span class="badge bg-success">Success</span>

<span class="badge bg-danger">Danger</span>

<span class="badge bg-warning text-dark">Warning</span>

<span class="badge bg-info text-dark">Info</span>

<span class="badge bg-light text-dark">Light</span>

<span class="badge bg-dark">Dark</span>