📌

Bootstrapで使用できる基本の配色

2025/01/30に公開

Bootstrapで使用できる基本の配色(クラス)一覧は以下の通りです。

🎨 Bootstrapの基本カラークラス

背景色(bg-

クラス 色の説明 HEXコード
bg-primary メインの青色 #0d6efd
bg-secondary 灰色(補助色) #6c757d
bg-success 緑色(成功メッセージ) #198754
bg-danger 赤色(エラーメッセージ) #dc3545
bg-warning 黄色(警告メッセージ) #ffc107
bg-info 水色(通知・情報) #0dcaf0
bg-light 明るい灰色 #f8f9fa
bg-dark 黒に近い灰色 #212529
bg-white 白色 #ffffff
bg-black 黒色 #000000
<div class="bg-primary text-white p-3">Primary 背景色</div>

文字色(text-

クラス 色の説明 HEXコード
text-primary 青色 #0d6efd
text-secondary 灰色 #6c757d
text-success 緑色 #198754
text-danger 赤色 #dc3545
text-warning 黄色 #ffc107
text-info 水色 #0dcaf0
text-light 明るい灰色 #f8f9fa
text-dark 黒に近い灰色 #212529
text-white 白色 #ffffff
text-black 黒色 #000000
text-muted 薄い灰色(非アクティブなテキスト) #6c757d
<p class="text-danger">エラーメッセージの例</p>
<p class="text-success">成功メッセージの例</p>

枠線(border-

クラス 色の説明
border-primary 青色の枠線
border-secondary 灰色の枠線
border-success 緑色の枠線
border-danger 赤色の枠線
border-warning 黄色の枠線
border-info 水色の枠線
border-light 明るい灰色の枠線
border-dark 黒に近い灰色の枠線
<div class="border border-danger p-3">赤い枠線</div>

ボタンの色(btn-

クラス 色の説明
btn-primary 青色ボタン
btn-secondary 灰色ボタン
btn-success 緑色ボタン
btn-danger 赤色ボタン
btn-warning 黄色ボタン
btn-info 水色ボタン
btn-light 明るい灰色ボタン
btn-dark 黒に近い灰色ボタン
btn-link リンク風ボタン
<button class="btn btn-primary">送信</button>
<button class="btn btn-danger">削除</button>

テーブルの色(table-

クラス 色の説明
table-primary 青色のテーブル
table-secondary 灰色のテーブル
table-success 緑色のテーブル
table-danger 赤色のテーブル
table-warning 黄色のテーブル
table-info 水色のテーブル
table-light 明るい灰色のテーブル
table-dark 黒に近い灰色のテーブル
<table class="table table-striped table-danger">
  <tr><th>名前</th><th>スコア</th></tr>
  <tr><td>田中</td><td>95</td></tr>
  <tr><td>佐藤</td><td>87</td></tr>
</table>

背景の透明度 (bg-opacity-)

Bootstrap 5 から、透明度 (opacity) を簡単に調整できるようになりました。

<div class="bg-primary bg-opacity-50 p-3">半透明の青色背景</div>
クラス 説明
bg-opacity-10 透明度 10%
bg-opacity-25 透明度 25%
bg-opacity-50 透明度 50%
bg-opacity-75 透明度 75%
bg-opacity-100 透明度 100%

まとめ

  • 背景色 → bg-〇〇
  • 文字色 → text-〇〇
  • 枠線色 → border-〇〇
  • ボタン色 → btn-〇〇
  • テーブル色 → table-〇〇
  • 透明度の調整 → bg-opacity-〇〇

Bootstrap公式の配色表
🔗 Bootstrap 5 Colors

使い方が分からない部分があれば、気軽に聞いてね!😊

Discussion