とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. アラート

アラート

.alert, .alert-{value} はアラートメッセージの背景に色付けします。

<div class="alert alert-primary" role="alert">Primary alert</div>
<div class="alert alert-secondary" role="alert">Secondary alert</div>
<div class="alert alert-success" role="alert">Success alert</div>
<div class="alert alert-danger" role="alert">Danger alert</div>
<div class="alert alert-warning" role="alert">Warning alert;</div>
<div class="alert alert-info" role="alert">Info alert</div>
<div class="alert alert-light" role="alert">Light alert</div>
<div class="alert alert-dark" role="alert">Dark alert</div>

アラートリンク

.alert-link は、アラートメッセージの背景に応じた色のリンクテキストを表示します。

<div class="alert alert-primary" role="alert">
  Primary alert. (See the <a href="#" class="alert-link">details</a>)
</div>

アラートヘッダ

.alert-heading は、アラートメッセージの背景に応じた色のヘッダを表示します。

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Success!</h4>
  <p>Your operation is ...</p>
</div>

削除可能アラート

.alert-dismissible は、data-dismiss="alert" を指定したボタン押下によって削除が可能なアラートを表示します。

<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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>