Toasts te pawh a awm

I tlawhtute hnena hriattirna chu toast hmangin push la, alert message rit lo leh awlsam taka siam theih a ni.

He page ah hian

Toasts hi mobile leh desktop operating system-in a tihlar tawh push notification ang deuha siam, notification lightweight tak a ni. Flexbox hmanga siam an nih avangin align leh position a awlsam hle.

A tlangpuiin

Toast plugin hman huna hriat tur awmte:

Toasts hi performance avanga opt-in a nih avangin nangmah ngeiin i initialize tur a ni .
Toasts chu i tarlan loh chuan a inthup nghal vek ang autohide: false.

He component hian animation effect hi prefers-reduced-motionmedia query ah a innghat a ni. Kan accessibility documentation a reduced motion tih hi en la .

Entirna te

Bulthut

Extensible leh predictable toasts fuih nan header leh body kan rawt a ni. Toast headers hmang display: flex, kan margin leh flexbox utilities vangin content awlsam taka alignment theih a ni.

Toasts hi i mamawh ang zela flexible a ni a, markup mamawh pawh a tlem hle. A tlem berah chuan i “toasted” content awmna tur element pakhat kan mamawh a, dismiss button pawh nasa takin kan fuih bawk.

Hello, khawvel! Hei hi toast message a ni.

html tih a ni

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Tun hma chuan kan script -te .hidechuan toast thup vek turin class chu dynamically-in an dah belh a (with display:none, rather than just with opacity:0). Hei hi tunah chuan a tul tawh lo. Mahse, backwards compatibility atan chuan kan script hian class chu a toggle chhunzawm zel ang (practical mamawh lo mahse) major version lo awm tur thlengin.

Entirna nung tak

A hnuaia button hi click la, toast (kan utilities te chu dinglam sir hnuai lama dah) default-a thup tawh chu a rawn lang ang.

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Kan live toast demo trigger nan a hnuaia JavaScript hi kan hmang a ni:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Translucent a ni

Toasts hi a hnuaia thil awm nen a inmil theih nan a translucent deuh a ni.

Hello, khawvel! Hei hi toast message a ni.

html tih a ni

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Stacking tih a ni

Toasts chu toast container-ah phuar la, i stack thei a, chu chuan vertical-in spacing engemaw zat a belh ang.

Hmu? Hetiang chiah hian.

Heads up, toasts chu a stack nghal vek ang

html tih a ni

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Custom content a awm bawk

I toasts te chu sub-components te paih chhuakin, utilities hmangin tweak la , emaw, nangmah ngeiin markup dahin emaw customize rawh. Hetah hian toast awlsam zawk kan siam a, default chu paih chhuakin , Bootstrap Icons.toast-header atanga custom hide icon dahin, flexbox utility thenkhat hmangin layout siamrem a ni.

Hello, khawvel! Hei hi toast message a ni.

html tih a ni

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

A dang pawhin toast-ah hian control leh component dang i dah belh thei bawk.

Hello, khawvel! Hei hi toast message a ni.

html tih a ni

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Color scheme hrang hrang te

A chunga kan sawi ang hian kan color leh background utilities hmang hian toast color scheme hrang hrang i siam thei ang. Hetah hian , kan dah belh .text-bg-primarya .toast, chutah chuan .btn-close-whitekan close button-ah kan dah leh ta a ni. Crisp edge atan chuan default border chu .border-0.

Hello, khawvel! Hei hi toast message a ni.

html tih a ni

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Hmun dahna tur

Toasts chu i mamawh angin custom CSS hmangin dah rawh. A chung dinglam hi notification atan hman a ni fo a, chung lam middle pawh a ni. Toast pakhat chauh i entir dawn a nih chuan positioning styles te chu .toast.

Hello, khawvel! Hei hi toast message a ni.

html tih a ni

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

Notification tam zawk siamtu system tan chuan awlsam taka an stack theih nan wrapping element hman tum ang che.

Hmu? Hetiang chiah hian.

Heads up, toasts chu a stack nghal vek ang

html tih a ni

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Toasts horizontal leh/or vertically align turin flexbox utilities hmangin fancy i hmu thei bawk.

Hello, khawvel! Hei hi toast message a ni.

html tih a ni

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

A thlen theihna tur

Toasts hi i tlawhtute emaw, i hmangtute emaw tana tihbuai tenau tak ni tura ruahman a ni a, chuvangin screen reader leh a ang chi assistive technology nei te tanpui nan, i toasts te chu aria-liveregion pakhatah i wrap tur a ni Live region-a inthlak danglamna (toast component inject/update ang chi) chu screen reader-te chuan user-te focus sawn emaw, thil dangin user-te tihtawp emaw ngai lovin automatic-in an puang chhuak ṭhin. Chu bâkah, toast pumpui chu unit pakhat (atomic) anga puan chhuah reng a nih theih nân telh bawk aria-atomic="true"ang che, thil tihdanglam tih puan mai ai chuan (chu chuan toast-a thu awm ṭhenkhat chauh i update chuan harsatna a thlen thei a, a nih loh leh toast thu awm ang chiah a lan chuan harsatna a thlen thei bawk). hun hnuhnung zawkah). Information mamawh chu process atana pawimawh a nih chuan, eg form-a tihsual list atan chuan alert component hmang rawhtoast ai chuan.

Toast siam emaw update emaw hmain markup-ah live region a awm a ngai tih hre reng ang che . A pahnih hian a ruala dynamically generate a, page chhungah inject a nih chuan, a tlangpuiin assistive technology hmangin an puang dawn lo.

Tin , a content a zirin roleleh level pawh i adapt a ngai bawk . aria-liveError ang chi message pawimawh tak a nih chuan , hmang la role="alert" aria-live="assertive", chutiang a nih loh chuan role="status" aria-live="polite"attribute hmang rawh.

I thil hmuh tur a inthlak ang zelin, a hmangtute’n toast chhiar hun an neih theih nan delaytimeout kha update ngei ang che.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

, i hman hunah chuan autohide: falsetoast chu a dismiss theih nan close button i dah tel tur a ni.

Hello, khawvel! Hei hi toast message a ni.

html tih a ni

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Technically chuan i toast-ah hian focusable/actionable controls (additional buttons emaw links ang chi) dah theih a nih laiin, autohiding toasts atan chuan hetiang hi tih loh tur a ni. Even if you give the toast a long delaytimeout , keyboard leh assistive technology hmangtute chuan hmalak tumin toast chu a hun taka thlen harsa an ti mai thei (toast-te an lan hunah focus an dawng lo a nih avangin). Control dang i neih ngei ngei tur a nih chuan, toast with autohide: false.

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 tunah chuan toasts hian local CSS variables on hmangin .toastreal-time customization tihchangtlun nan 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}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass a danglam thei

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Hman dan tur

JavaScript hmangin toast te chu initialize theih a ni:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Triggers te a awm

Dismissal hi a hnuaia tarlan ang hian toast chhungadata button pakhata attribute hmangin tih theih a ni :

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

emaw, a hnuaia tarlan ang hian toast pawn lama button-ah emaw data-bs-target:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmanga pass theih a nih avangin option hming chu data-bs-, ah hian i append thei ang data-bs-animation="{value}". Data attribute hmanga options pass dawnin option hming case type chu “ camelCase ” atanga “ kebab-case ” ah thlak ngei ngei tur a ni. Entirnan, data-bs-custom-class="beautifier"tih aiah hmang data-bs-customClass="beautifier"rawh.

Bootstrap 5.2.0 atang khan component zawng zawng hian experimental reserved data attribute an support data-bs-configa, chu chuan JSON string angin component configuration awlsam tak a dah thei a ni. Element pakhatin data-bs-config='{"delay":0, "title":123}'leh data-bs-title="456"attribute a neih chuan a tawp ber titlevalue chu a ni ang a 456, data attribute hrang hrangte chuan , a value pekte chu a override ang data-bs-config. Chu bakah, data attribute awmsa te hian JSON value te chu data-bs-delay='{"show":0,"hide":150}'.

Hming	Lampang	Hlawhchhamna	Hrilhfiahna
`animation`	boolean a ni	`true`	Toast ah hian CSS fade transition hmangin apply rawh.
`autohide`	boolean a ni	`true`	Delay hnuah toast chu automatic in a thup ang.
`delay`	a zat	`5000`	Toast thup hmain millisecond chhungin delay hmasa phawt ang che.

Thiltih dan tur

Asynchronous method leh inthlak danglamna te

API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .

Hriat belh duh chuan kan JavaScript documentation en rawh .

Tihdan	Hrilhfiahna
`dispose`	Element pakhat toast a thup thin. I toast chu DOM-ah a awm reng ang a, mahse a lang tawh lo vang.
`getInstance`	Static method hmanga DOM element nena inzawm toast instance hmuh theihna tur. Entirnan: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Bootstrap toast instance a rawn pe leh thin.
`getOrCreateInstance`	Static method hmangin DOM element nena inzawm toast instance chu i hmu thei a, a nih loh leh a thar siam theih a ni a, initialized a nih loh chuan. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Bootstrap toast instance a rawn pe leh ang.
`hide`	Element pakhat toast a thup thin. Toast thup tak tak a nih hmain (chu chu `hidden.bs.toast`thilthleng a thlen hma) call tu hnenah a kir leh thin. I siam a nih chuan he method hi manual-in i call a `autohide`ngai a `false`ni.
`isShown`	Toast visibility state angin boolean a rawn pe kir leh thin.
`show`	Element pakhat toast a pholang. Toast a lan tak tak hmain (chu chu `shown.bs.toast`thilthleng a thlen hma) call tu hnenah a kir leh thin. Hetiang method hi manual-in i call a ngai a, chu ai chuan i toast chu a lang lo vang.

Thil thlengte

Hunbik	Hrilhfiahna
`hide.bs.toast`	`hide`He event hi instance method koh a nih chuan a fire nghal a ni.
`hidden.bs.toast`	He event hi toast chu user hnen atanga thup a nih zawh chuan a fire thin.
`show.bs.toast`	`show`He event hi instance method kan koh chuan a fire nghal vek a ni.
`shown.bs.toast`	He event hi toast chu a hmangtu hmuh theiha siam a nih tawh chuan a kap thin.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})