Bootstrap3に標準で用意されているクラス【color編】をまとめてみました。
目次
文字の色
text-****
文字の色を変更してくれるクラスです。
text-muted
text-primary
text-success
text-info
text-warning
text-danger
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>背景色
bg-****
背景色を変更してくれるクラスです。
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>アラート
alert alert-***
アラートメッセージを表示するクラスです。alert ＋ alert-*** でアラート色を指定できます。デフォルトはありません。
alert-success 成功
alert-info 情報
alert-warning 注意
alert-danger 危険 エラー
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>ラベル
label label-***
ラベルを表示するクラスです。label ＋ label-*** でラベルの色を指定できます。
Default Primary Success Info Warning Danger
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
あわせて読みたい
Bootstrap4に用意されているクラス【color編】
Bootstrap4に標準で用意されているクラス【color編】をまとめてみました。 文字の色 text-**** 文字の色を変更してくれるクラスです。Bootstrap4では.text-secondary .t...