Bootstrap 5 カラークラス 完全ガイド
Bootstrap 5は、Web制作において圧倒的な人気を誇るCSSフレームワークです。中でも「カラークラス」は、デザインの印象を大きく左右する重要な要素といえるでしょう。しかしながら、text-primary や bg-warning のように多くのクラス名が存在するため、「どれを使えばいいの？」「違いが分かりづらい…」と感じる方も少なくありません。
そこでこのページでは、Bootstrap 5に用意された色の仕組みや用途、そして選び方のコツについて、順を追ってわかりやすく解説していきます。
Bootstrap 5 の背景色、文字色、ボーダー色、ボタン色など、主要なユーティリティクラスを一覧で確認できるようにまとめています。これにより、デザイン設計のスピードと効率が格段に向上するはずです。
🎨 Bootstrap 5 カラー チートシート
✅ カラーパレット（基本）
| |
色名 |
色コード |
説明 |
|
primary |
#0d6efd |
主に使う強調色 |
|
secondary |
#6c757d |
補助的な灰色系 |
|
success |
#198754 |
成功・完了通知 |
|
danger |
#dc3545 |
エラー・危険 |
|
warning |
#ffc107 |
注意・警告 |
|
info |
#0dcaf0 |
情報提供用 |
|
light |
#f8f9fa |
明るい背景などに |
|
dark |
#212529 |
暗い背景などに |
|
white |
#ffffff |
白背景、文字 |
|
black |
#000000 |
黒背景、文字 |
🖌️ 背景色クラス
| クラス名 |
説明 |
bg-primary |
主色の背景 |
bg-secondary |
補助色の背景 |
bg-success |
成功通知背景 |
bg-danger |
エラー背景 |
bg-warning |
警告背景（黄） |
bg-info |
情報背景（青） |
bg-light |
明るい背景 |
bg-dark |
暗い背景 |
bg-white |
白背景 |
bg-transparent |
透明背景 |
✍️ 文字色クラス
| クラス名 |
説明 |
text-primary |
主色の文字 |
text-success |
成功通知の文字 |
text-danger |
エラー文字 |
text-warning |
警告文字 |
text-info |
情報文字 |
text-light |
明るい文字（黒背景用） |
text-dark |
暗い文字（白背景用） |
text-muted |
薄いグレー文字 |
text-white |
白文字 |
text-black-50 |
50%黒 |
text-white-50 |
50%白 |
🧱 ボーダー色クラス
| クラス名 |
説明 |
border |
デフォルトボーダー |
border-primary |
主色の枠線 |
border-success |
成功の枠線 |
border-danger |
エラーの枠線 |
border-warning |
警告の枠線 |
border-info |
情報の枠線 |
border-dark |
暗色の枠線 |
border-light |
明色の枠線 |
🧵 ボタンカラークラス
| クラス名 |
説明 |
btn-primary |
主色ボタン |
btn-secondary |
補助色ボタン |
btn-success |
成功ボタン |
btn-danger |
エラーボタン |
btn-warning |
警告ボタン |
btn-info |
情報ボタン |
btn-light |
明るいボタン |
btn-dark |
暗いボタン |
btn-outline-* |
枠線だけのボタン（例：btn-outline-danger） |
💡 補足
- 色のクラスに
-50, -75 など透明度を加える拡張は CSS カスタムで対応。
- Bootstrapのカラーユーティリティは SCSS変数 によって再定義可能です。
| 100% |
75% |
50% |
25% |
| primary |
|
|
|
| success |
|
|
|
| danger |
|
|
|
| warning |
|
|
|
| light |
|
|
|
| info |
|
|
|
📄 参考用コード例
Primary 背景・白文字
これは muted（グレー）テキストです。
