アラート .alert

目立たせる必要がある要素を表示します。.alertクラスに、必要に応じてユーティリティクラスを用いることで、色とりどりのアラートを表現しましょう。

また、.iconクラスの要素を内包することで、Font Awesome等の任意のアイコンを表示するのに役立ちます。

例

<div class="vstack">
  <div class="alert">
    <i class="icon fas fa-info-circle"></i>
    タイトルを設定しましょう。
  </div>
  <div class="alert bg-primary">
    <i class="icon fas fa-info-circle"></i>
    タイトルを設定しましょう。
  </div>
  <div class="alert bg-success">
    <i class="icon fas fa-check"></i>
    更新が完了しました。
  </div>
  <div class="alert bg-info">
    <i class="icon fas fa-star"></i>
    本日より追加された新機能があります。
  </div>
  <div class="alert bg-danger">
    <i class="icon fas fa-times-circle"></i>
    エラーが発生しました。
  </div>
  <div class="alert bg-warn">
    <i class="icon fas fa-exclamation-triangle"></i>
    本機能は削除予定のため、使用を推奨しません。
  </div>
</div>