Bootstrapアラート・バッジの使い方
通知と状態表示のコンポーネント
アラートはユーザーへの通知メッセージ、バッジは数値や状態を小さく表示するコンポーネントです。
どちらもクラスを付けるだけで簡単に実装できます。
こんな人向けの記事です
- 成功・エラーなどの通知メッセージを表示したい
- 未読数やステータスをバッジで表示したい
- 閉じるボタン付きのアラートを作りたい
Step 1基本のアラート
保存が完了しました。
エラーが発生しました。
入力内容を確認してください。
お知らせがあります。
HTML
<div class="alert alert-success">保存が完了しました。</div>
<div class="alert alert-danger">エラーが発生しました。</div>
<div class="alert alert-warning">入力内容を確認してください。</div>
<div class="alert alert-info">お知らせがあります。</div>Step 2閉じるボタン付きアラート
HTML
<div class="alert alert-warning alert-dismissible fade show">
入力内容を確認してください。
<button type="button" class="btn-close"
data-bs-dismiss="alert"></button>
</div>閉じるボタンに必要なクラス
alert-dismissible → 閉じるボタン用のパディングを追加fade show → フェードアウトアニメーションdata-bs-dismiss="alert" → クリックでアラートを消す（Bootstrap JS必要）
Step 3アラート内のリンクとアイコン
HTML
<!-- アラート内にリンク -->
<div class="alert alert-info">
詳細は<a href="#" class="alert-link">こちら</a>をご覧ください。
</div>
<!-- 見出し付きアラート -->
<div class="alert alert-success">
<h4 class="alert-heading">登録完了！</h4>
<p>アカウントの登録が正常に完了しました。</p>
<hr>
<p class="mb-0">ログインページからサインインしてください。</p>
</div>Step 4基本のバッジ
Primary
Success
Danger
Warning
丸型
HTML
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<!-- 丸型バッジ -->
<span class="badge rounded-pill bg-primary">丸型</span>Step 5バッジの活用パターン
HTML
<!-- ボタンに通知数を表示 -->
<button class="btn btn-primary">
メッセージ <span class="badge bg-danger">4</span>
</button>
<!-- 見出しにバッジ -->
<h3>新機能 <span class="badge bg-success">New</span></h3>
<!-- リスト項目にバッジ -->
<li class="list-group-item d-flex justify-content-between">
受信トレイ
<span class="badge bg-primary rounded-pill">14</span>
</li>まとめ
alert alert-{色}で通知メッセージを表示alert-dismissible+btn-closeで閉じるボタン付きalert-linkでアラート内のリンクを統一色にbadge bg-{色}でバッジを表示rounded-pillで丸型バッジ