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