Main content ah kal rawh Docs navigation ah kal rawh
in English

Alerts a awm bawk

User thiltih dan tlangpui atan contextual feedback message pe la, alert message awm thei leh inthlak danglam thei tlemte nen pe rawh.

He page ah hian

Entirna te

Text sei zawng zawng tan alerts a awm a, chubakah optional close button pawh a awm bawk. Styling dik tak atan chuan contextual class mamawh pariat zinga pakhat hmang la (eg, .alert-success). Inline dismissal atan chuan alerts JavaScript plugin hmang la .

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
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.

Entirna nung tak

A hnuaia button hi click la, alert (start tur chuan inline styles hmanga thup) a rawn lang ang a, chutah chuan built-in close button hmangin dismiss (leh destroy rawh).

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

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

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

.alert-linkAlert eng pawh chhungah rang taka matching colored links pe turin utility class hmang ang che .

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Thu belhchian dawl lo

Alert-ah hian HTML element dang heading, paragraph leh divider te pawh a awm thei bawk.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Icons te pawh a awm

Chutiang bawkin flexbox utilities leh Bootstrap Icons hmangin icon hmangin alert i siam thei bawk. I icon leh content a zirin utility tam zawk emaw custom style emaw i dah belh duh mai thei.

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

I alerts atan icon pakhat aia tam i mamawh em? Bootstrap Icon tam zawk hman leh local SVG sprite like so siam tum la, awlsam taka icon inangte chu reference nawn leh fo rawh.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

Dismis a ni

Alert JavaScript plugin hmang hian inline-a alert eng pawh dismiss theih a ni. Hetah hian engtin nge ni ang:

  • Alert plugin kha i load tawh ngei ang che, a nih loh leh Bootstrap JavaScript compile kha i load tawh ngei ang.
  • Close button leh class dah la .alert-dismissible, chu chuan alert dinglamah extra padding a dah belh a, close button chu a dah bawk.
  • Close button ah chuan data-bs-dismiss="alert"attribute chu add la, chu chuan JavaScript functionality a tichhuak ang. <button>Device zawng zawnga nungchang dik tak neih theih nan element nen hmang ngei ang che .
  • Dismissing hunah alerts animate tur chuan .fadeand .showclass te kha add ngei ang che.

Hei hi live demo hmangin action-ah i hmu thei ang:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Alert dismiss a nih chuan element chu page structure atangin a chhuak vek a ni. Keyboard hmangtuin close button hmanga alert a dismis chuan an focus chu a bo nghal ang a, browser a zirin page/document bul tannaah a reset ang. Hemi avang hian, closed.bs.alertthilthleng ngaihthlak thei leh programmatic focus()-a page chhunga hmun remchang ber dah thei JavaScript dang dah belh kan rawt a ni. Focus chu a tlangpuiin focus dawng lo non-interactive element-ah sawn i tum a nih chuan element-ah hian add ngei ngei tur a tabindex="-1"ni.

Sass a ni

Variables te pawh a awm

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Variant mixin a ni

$theme-colorsKan alerts te tana contextual modifier class siam nan hman a ni.

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Suih

alert-variant()Loop chuan mixin hmangin modifier class te a siam chhuak thin .

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

JavaScript tih dan tur

Initial rawh

Elements te chu alert angin initialize rawh

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return new bootstrap.Alert(element)
})

Alert dismissing mai mai atan chuan JS API hmanga component chu manual-a initialize a ngai lo. , hmang data-bs-dismiss="alert"hian component chu automatic in initialized a ni ang a, uluk takin dismiss a ni ang.

A chipchiar zawkna chu triggers section ah hian en rawh .

Triggers te a awm

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

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

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

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

Alert khar chuan DOM atangin a paih chhuak ang tih hre reng ang che.

Thiltih dan tur

Tihdan Hrilhfiahna
close DOM atanga alert lakchhuah hmangin a khar thin. Element -ah hian .fadeand .showclass a awm chuan alert chu a paih hmain a fade out ang.
dispose Element pakhat alert a tichhia. (DOM element-a data dahkhawmte a paih chhuak)
getInstance Static method hmanga DOM element nena inzawm alert instance hmuh theihna tur, hetiang hian i hmang thei ang:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Static method chu DOM element nena inzawm alert instance rawn pe chhuak emaw, initialized a nih loh chuan a thar siam emaw a ni. Hetiang hian i hmang thei ang:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Thil thlengte

Bootstrap-a alert plugin hian alert functionality-a hook theihna tur thil thleng tlemte a pholang a ni.

Hunbik Hrilhfiahna
close.bs.alert closeInstance method a koh chuan a kang nghal vek .
closed.bs.alert Alert khar a nih a, CSS transition a zawh tawh chuan fired a ni. 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})