2015/06/27  Bootstrap 

Bootstrapに標準で用意されているクラス【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-***

アラートメッセージを表示するクラスです。alertalert-*** でアラート色を指定できます。デフォルトはありません。

<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-***

ラベルを表示するクラスです。labellabel-*** でラベルの色を指定できます。

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>