Badge dɛn we dɛn kin yuz

Dokumɛnt ɛn ɛgzampul fɔ badge, wi smɔl kɔnt ɛn lɛbul kɔmpɔnɛnt.

Na dis pej

Ɛgzampul dɛn

Badge dɛn de skel fɔ mach di sayz fɔ di immediate parent element bay we dɛn de yuz rilitiv font saiz ɛn emyunit dɛn. As of v5, badge dɛn nɔ gɛt fɔs ɔ hova stayl fɔ link dɛn igen.

Di edlayn dɛn

Ɛgzampul edlaynNyu

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

Bɔtin dɛn

Yu kin yuz badge as pat pan link ɔ bɔtin fɔ gi kɔnta.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

Notis se dipen pan aw dɛn de yuz dɛn, badge dɛn kin kɔnfyus fɔ di wan dɛn we de yuz skrin rida ɛn dɛn kayn ɛp tɛknɔlɔji dɛn ya. Pan ɔl we di stayl we dɛn mek fɔ di badge dɛn de mek dɛn ebul fɔ si wetin dɛn want fɔ du, dɛn go jɔs sho dɛn wan dɛn ya we de yuz am di tin dɛn we de insay di badge. Dipen pan di patikyula tin we de apin, dɛn badge dɛn ya kin tan lɛk ɔda wɔd dɛn ɔ nɔmba dɛn we dɛn kin put na di ɛnd pan wan sɛntɛns, link, ɔ bɔtin.

If di kɔntɛks nɔ klia (lɛk di ɛgzampul we se “Notis dɛn,” usay dɛn ɔndastand se di “4” na di nɔmba fɔ di notis dɛn), tink bɔt fɔ put ɔda kɔntɛks wit ɔda tɛks we dɛn ayd wit yu yay.

Dɛn dɔn put am na di pozishɔn

Yuz yutiliti fɔ chenj wan .badgeɛn put am na di kɔna na wan link ɔ bɔtin.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

Yu kin riples di .badgeklas bak wit sɔm mɔ yutiliti dɛn we nɔ gɛt kɔnt fɔ wan mɔ jenɛrik indikɛtɔ.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Bakgrɔn kɔlɔ dɛn

Yuz wi bakgrɔn yutiliti klas dɛn fɔ chenj di we aw badge tan kwik kwik wan. Duya mɛmba se we yu de yuz Bootstrap in difɔlt .bg-light, yu go mɔs nid fɔ gɛt tɛks kɔlɔ yutiliti lɛk .text-darkfɔ mek yu stayl fayn. Dis na bikɔs bakgrɔn yutiliti dɛn nɔ de sɛt ɛnitin bɔt background-color.

Fɔs Sɛkɔndari Go bifo Denja Wɔnin Info Layt Dak

<span class="badge bg-primary">Primary</span>
<span class="badge 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>

Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp

Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .visually-hiddenklas.

Pil badge dɛn

Yuz di .rounded-pillyutiliti klas fɔ mek badge dɛn rawnd mɔ wit wan big border-radius.

Fɔs Sɛkɔndari Go bifo Denja Wɔnin Info Layt Dak

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

Sass we bin de

Di tin dɛn we kin chenj

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;