Alerts (アラート)

柔軟性のあるアラートメッセージで、典型的なユーザーアクションに対して文脈に沿ったフィードバックメッセージを提供します。

On this page

Examples

任意の長さのアラートを表示できます。オプションで閉じるボタンがあります。適切なスタイルを設定するには、8つのrequiredコンテキストクラスのいずれかを使用します（例： .alert-success）インラインで閉じる場合は alerts JavaScript plugin 使用します。

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

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

支援技術への意味の伝達

色を使って意味を付加することは、視覚的な表示を提供するだけで、スクリーン・リーダーなどの支援技術のユーザーには伝わりません。色で示された情報は、コンテンツ自体から明らかになっているか（例：可視テキスト）、あるいは、.visually-hiddenクラスで隠された追加テキストのような代替手段で含まれていることを確認してください。

Link color

.alert-link クラスを適用すると、リンクが適切なカラーになります。

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

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

Additional content

アラートには、見出し、段落、仕切りなどのHTML要素を含めることができます。

Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

<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

同様に、flexbox utilitiesとBootstrap Iconsを使用して、アイコン付きのアラートを作成できます。アイコンとコンテンツによっては、ユーティリティやカスタムスタイルを追加することもできます。

An example alert with an icon

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

同じアイコンを繰り返し簡単に参照できるようにすることもできます。Bootstrap Icons を使用し、ローカルSVGスプライトを作成してる例をご覧ください。

An example alert with an icon

An example success alert with an icon

An example warning alert with an icon

An example danger alert with an icon

<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"><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"><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"><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"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

Dismissing

アラートのJavaScript plugin を使用すると、アラートインラインを消すことができます。

アラートの JavaScript plugin を読み込むか, Bootstrap JavaScriptを読み込んでください。
close button に .alert-dismissible クラスを追加すると警告の右側に追加の余白が追加され、クローズボタンの位置が決まります。
クローズボタンに data-bs-dismiss="alert" 属性を追加します。これにより、JavaScript機能がトリガーされます。すべてのデバイスで適切な動作をさせるには、必ず <button> 要素を使用してください。
アラートを解除するときにアラートをアニメートするには、必ず .fade および .show クラスを追加してください。

ライブデモを見ることができます：

Holy guacamole! You should check in on some of those fields below.

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

When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the closed.bs.alert event and programmatically sets focus() to the most appropriate location in the page. If you’re planning to move focus to a non-interactive element that normally does not receive focus, make sure to add tabindex="-1" to the element.

Sass

Variables

$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

Used in combination with $theme-colors to create contextual modifier classes for our alerts.

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

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

Loop

Loop that generates the modifier classes with the 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);
  }
}

JavaScript behavior

Triggers

JavaScript経由でアラート閉じるを有効にします。

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

または, クローズボタンの data 属性を持ちます。

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

アラートを閉じると、アラートがDOMから削除されます。

Methods

アラートのインスタンスを作成するには、例えば alert のコンストラクタを使用します。

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

data-bs-dismiss="alert" 属性を子孫要素のクリックイベントに対してアラートをリッスンするようにします。
(data-apiの自動初期化を使用している場合は必要ありません)。

Method	Description
`close`	DOMから削除してアラートを閉じます。`.fade` and `.show` クラスが要素に存在する場合、アラートは削除される前にフェードアウトします。
`dispose`	アラート要素を破棄します。
`getInstance`	DOM 要素に関連付けられたアラートのインスタンスを取得する静的メソッドです。使い方: `bootstrap.Alert.getInstance(alert)`

var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Events

Bootstrapのalertプラグインは、アラート機能にフックするためのいくつかのイベントがあります。

Event	Description
`close.bs.alert`	`close` インスタンス・メソッドが呼ばれたときにすぐに発生します。
`closed.bs.alert`	アラートが閉じられ、CSSの遷移が完了したときに発生します。

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