Badge ng Bootstrap 5

Medalya

Ang mga medalya (Badges) ay ginagamit upang magdagdag ng karagdagang impormasyon sa nilalaman:

Sa <span> Sa elemento gamit .badge Mga klase at klase ng konteksto (tulad ng .bg-secondary）Upang lumikha ng rectangular na medalya. Tingnan na ang medalya ay susagot sa laki ng magulang na elemento (kung mayroon):

Halimbawa

<h1>Halimbawa ng pamagat <span class="badge bg-secondary">Bagong</span></h1>
<h2>Halimbawa ng pamagat <span class="badge bg-secondary">Bagong</span></h2>
<h3>Halimbawa ng pamagat <span class="badge bg-secondary">Bagong</span></h3>
<h4>Halimbawa ng pamagat <span class="badge bg-secondary">Bagong</span></h4>
<h5>Halimbawa ng pamagat <span class="badge bg-secondary">Bagong</span></h5>
<h6>Halimbawa ng pamagat <span class="badge bg-secondary">Bagong</span></h6>

Subukan Lang Muna

Contextual badges

Ginagamit ang anumang uri ng klase ng konteksto (.bg-*) Sa pagbabago ng kulay ng mga medalya:

Halimbawa

<span class="badge bg-primary">Pangunahing pangalan</span>
<span class="badge bg-secondary">Pangalawang pangalan</span>
<span class="badge bg-success">Matagumpay</span>
<span class="badge bg-danger">Panganib</span>
<span class="badge bg-warning">Babala</span>
<span class="badge bg-info">Mga Impormasyon</span>
<span class="badge bg-light">Mapula</span>
<span class="badge bg-dark">Maitim</span>

Subukan Lang Muna

Capsule Badge

Gumamit .rounded-pill Ang klase na ginagamit upang gawing mas matataas ang badge:

Halimbawa

<span class="badge rounded-pill bg-primary">Pangunahing Kalakaran</span>
<span class="badge rounded-pill bg-secondary">Pangalawang Kalakaran</span>
<span class="badge rounded-pill bg-success">Matagumpay</span>
<span class="badge rounded-pill bg-danger">Panganib</span>
<span class="badge rounded-pill bg-warning">Babala</span>
<span class="badge rounded-pill bg-info">Mga Impormasyon</span>
<span class="badge rounded-pill bg-light">Mapula</span>
<span class="badge rounded-pill bg-dark">Maitim</span>

Subukan Lang Muna

Badge sa loob ng elemento

Halimbawa ng paggamit ng badge sa buton:

Halimbawa

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

Subukan Lang Muna