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

html

<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.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

html

<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ɔ.

html

<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

Dɛn ad am na v5.2.0

Set a background-colorwit kɔntrast fɔgrɔn colorwit wi .text-bg-{color}ɛlda dɛn . Bifo dis tɛm, dɛn bin nid fɔ yuz yu an fɔ pe yu chuk .text-{color}ɛn .bg-{color}yutiliti fɔ stayl, we yu kin stil yuz if yu want.

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

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

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

CSS we dɛn kɔl CSS

Di tin dɛn we kin chenj

Dɛn ad am na v5.2.0

As pat pan Bootstrap in evolvin CSS vɛriɔbul dɛn aprɔch, badge dɛn naw de yuz lokal CSS vɛriɔbul dɛn on .badgefɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass di vayriɔbul dɛn

$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;