Badge te pawh a awm

Badge hrang hrang atana documentation leh entirnan, kan small count leh labeling component te.

He page ah hian

Entirna te

emBadge te hian relative font sizing leh unit hmangin immediate parent element size nena inmil turin an scale thin . v5 atang khan badge te hian link atan focus emaw hover style an nei tawh lo.

Thupui hrang hrangte

Entirna thupuiThar

html tih a ni

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

Buttons te a awm

Badge hi link emaw button emaw a tel angin counter siam nan hman theih a ni.

html tih a ni

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

An hman dan azirin screen reader leh a ang chi assistive technology hmangtute tan chuan badge hi a buaithlak thei tih hre reng ang che. Badge-te styling hian an thil tum chu hmuh theiha a hriat theih laiin, heng hmangtute hian badge-a thu awmte chu an rawn present mai dawn a ni. Thil awm dân chiang tak a zirin, heng badge-te hi sentence, link, a nih loh leh button tâwpah random additional word emaw number emaw ang maiin a lang thei a ni.

Context a chiang loh chuan (“Notifications” entîrna ang bawkin, “4” chu notification awm zat a ni tih hriatthiam a nih chuan), thil dang hmuh theiha thup, thuziak belhchhah nêna thup dang dah belh chu ngaihtuah rawh.

Position a awm tawh

Utilities hmangin a siam danglam la .badge, link emaw button emaw corner-ah dah rawh.

html tih a ni

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

.badgeTin, class chu generic zawk indicator atan count awm lovin utility tlemte dang hmangin i thlak thei bawk .

html tih a ni

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

Background rawng hrang hrang

v5.2.0 ah dah belh a ni

Kan tanpuitutebackground-color nen contrasting foreground nen colorset a . Tun hma chuan i duhthlanna leh styling atana utilities te chu manual-a pair a ngai thin a, chu chu i duh chuan i la hmang thei tho..text-bg-{color}.text-{color}.bg-{color}

Hmasa ber Secondary a ni Hlawhtling Hlauhawm Vaulawkna Info Eng Thim

html tih a ni

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

Assistive technology-te hnena awmzia thlentu

awmzia belhchhah nan color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute hnenah a thlen dawn lo – screen reader ang chi te. Color hmanga tarlan information chu a thupui a\ang ngeia lang (entir nan, hmuh theih thuziak), a nih loh leh kawng dang hmanga telh a nih theih nan enfiah rawh, chu chu .visually-hiddenclass nena thup belh thuziak ang chi a ni.

Pill badge te pawh a awm

Utility class hmangin .rounded-pillbadge te chu a lian zawk nen round zawkin siam rawh border-radius.

Hmasa ber Secondary a ni Hlawhtling Hlauhawm Vaulawkna Info Eng Thim

html tih a ni

<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 a ni

Variables te pawh a awm

v5.2.0 ah dah belh a ni

Bootstrap-in CSS variables approach a kalpui mek zingah hian badge-te chuan local CSS variables on hmangin .badgereal-time customization tihchangtlunna atan an hmang ta a ni. CSS variable hrang hrangte tana value te hi Sass hmanga set a nih avangin Sass customization pawh a la support reng bawk.

  --#{$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 a danglam thei

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