Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Alɛrt dɛn

Gi kɔntɛkstual fidbak mɛsej fɔ tipik yuza akshɔn dɛn wit di anful alɛt mɛsej dɛn we de ɛn we kin chenj.

Na dis pej

Ɛgzampul dɛn

Alɛt dɛn de fɔ ɛni lɔng tɛks, ɛn yu kin gɛt wan bɔtin we yu kin pik fɔ lɔk. Fɔ mek yu stayl fayn, yuz wan pan di et kɔntɛkstual klas dɛn we yu nid.alert-success (ɛgz., ). Fɔ dismisal insay layn, yuz di alɛt dɛn JavaSkript plɔgin .

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

Layf ɛgzampul

Klik di bɔtin we de dɔŋ fɔ sho wan alɛt (we dɛn ayd wit inlayn stayl dɛn fɔ stat), dɔn dismis (ɛn pwɛl) am wit di klos bɔtin we de insay.

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

Wi de yuz di JavaSkript we de dɔŋ fɔ trig wi layv alɛt dɛmo:

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')
  })
}

Yuz di .alert-linkyutiliti klas fɔ gi link dɛn we gɛt kɔlɔ we de mach kwik kwik wan insay ɛni alɛt.

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

Ɔda tin dɛn we de insay de

Alɛt dɛn kin gɛt ɔda HTML ɛlimɛnt dɛn bak lɛk ɛd, paregraf ɛn divayda dɛn.

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

Aykɔn dɛn

Semweso, yu kin yuz flexbox utilities ɛn Bootstrap Icons fɔ mek alɛt dɛn wit aykɔn dɛn. Dipen pan yu aykɔn dɛn ɛn wetin de insay, yu go want fɔ ad mɔ yutiliti dɛn ɔ kɔstɔm stayl dɛn.

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

Yu nid mɔ pas wan aykɔn fɔ yu alɛt dɛn? Tink bɔt fɔ yuz mɔ Bootstrap Aykɔn dɛn ɛn mek wan lokal SVG sprite lɛk so fɔ mek i izi fɔ rɛfrɛns di sem aykɔn dɛn bɔku bɔku tɛm.

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

Fɔ dismis

Yuz di alɛt JavaSkript plɔgin, i pɔsibul fɔ dismis ɛni alɛt inlayn. Na dis na aw fɔ du am:

  • Mek shɔ se yu dɔn lod di alɛt plɔgin, ɔ di Bootstrap JavaSkript we dɛn dɔn kɔmpilayt.
  • Ad wan klos bɔtin ɛn di .alert-dismissibleklas, we de ad ɛkstra pad na di rayt say na di alɛt ɛn put di klos bɔtin.
  • Na di klos bɔtin, ad di data-bs-dismiss="alert"atribyut, we de mek di JavaSkript wok fayn. Mek shɔ se yu yuz di <button>ɛlimɛnt wit am fɔ biev fayn akɔdin to ɔl di divays dɛn.
  • Fɔ mek di alɛt dɛn gɛt layf we yu de dismis dɛn, mek shɔ se yu ad di .fadeɛn .showklas dɛn.

Yu kin si dis in akshɔn wit wan layv dɛmo:

<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>
We dɛn dismis wan alɛt, dɛn kin pul di ɛlimɛnt ɔlsay na di pej strɔkchɔ. If pɔsin we de yuz di kibɔd dismis di alɛt bay we i yuz di klos bɔtin, dɛn fɔs go lɔs wantɛm wantɛm ɛn, i go dipen pan di brawza, dɛn go riset am to di say we di pej/dɔkyumɛnt bigin. Fɔ dis rizin, wi kin advays yu fɔ put ɔda JavaSkript we de lisin to di closed.bs.alertivent ɛn we de sɛt programmatik wan focus()to di say we fit pas ɔl na di pej. If yu de plan fɔ muv fɔs to wan nɔ-intaraktiv ɛlimɛnt we nɔmal wan nɔ de gɛt fɔs, mek shɔ se yu ad tabindex="-1"to di ɛlimɛnt.

Sass we bin de

Di tin dɛn we kin chenj

$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 na miksin

Yuz in kɔmbaynshɔn wit $theme-colorsfɔ mek kɔntɛkstual modifya klas fɔ wi alɛt dɛn.

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

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

Tay

Loop we de jenarayz di modifya klas dɛn wit di alert-variant()mixin.

// 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);
  }
}

JavaSkript bihayvya

Fɔ bigin fɔ yuz am

Initialize elemɛnt dɛn as alɛt dɛn

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

Fɔ di wangren rizin fɔ dismis wan alɛt, i nɔ nid fɔ initialize di kɔmpɔnɛnt manually via di JS API. We yu yuz data-bs-dismiss="alert", di kɔmpɔnɛnt go bigin ɔtomɛtik wan ɛn dɛn go dismis am fayn fayn wan.

Si di trig dɛn sɛkshɔn fɔ no mɔ.

Di tin dɛn we de mek pɔsin want fɔ du sɔntin

Yu kin ebul fɔ dismis wit di dataatribyut we de na wan bɔtin insay di alɛt lɛk aw dɛn sho dɔŋ ya:

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

ɔ na wan bɔtin we de na do na di alɛt yuz di data-bs-targetlɛk aw dɛn sho dɔŋ ya:

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

Notis se we yu lɔk wan alɛt, i go pul am na di DOM.

Di we aw dɛn de du am

We Tɔk bɔt
close Klos wan alɛt bay we i pul am na di DOM. If di .fadeɛn .showklas dɛn de na di ɛlimɛnt, di alɛt go dɔn bifo dɛn pul am.
dispose Destroy wan element in alert. (I de pul di data we dɛn dɔn kip na di DOM ɛlimɛnt)
getInstance Statik we de alaw yu fɔ gɛt di alɛt instans we gɛt fɔ du wit wan DOM ɛlimɛnt, yu kin yuz am lɛk dis:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Statik mɛtɔd we de ritɔn wan alɛt instans we gɛt fɔ du wit wan DOM ɛlimɛnt ɔ mek wan nyu wan insay kes we dɛn nɔ bin initialize am. Yu kin yuz am lɛk dis:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Di tin dɛn we kin apin

Bootstrap in alert plɔgin de ɛksplɔz sɔm ivin dɛn fɔ huk insay alert funkshɔnaliti.

Program Tɔk bɔt
close.bs.alert Faya wantɛm wantɛm we dɛn kɔl di closeinstans mɛtɔd.
closed.bs.alert Faya we dɛn dɔn lɔk di alɛt ɛn di CSS transishɔn dɛn dɔn dɔn. 
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()
})