Bootstrapでよく使うクラス【まとめ】

コーディングを少しでも早くしたい！

ということで、Bootstrapでよく使うクラスをまとめました。

Bootstrapは便利ですね。

自分でクラスを作らなくていいのでコーディングが早くできます。

テキスト関係

・文字色を変える

<p class='text-primary'>こんにちは</p>

text-secondary

text-success

text-danger

text-warning

text-info

・文字を中央に配置する

<p class='text-center'>こんにちは</p>

・文字を太くする

font-weight-bold

・文字を細くする（h2などあらかじめ太文字の設定がされているものに）

font-weight-normal

・大見出しにする(h1などの見出しタグよりも大きくなる)

display-4

ボタン

通常のボタン

btn btn-primary

小さいボタン

btn btn-info btn-sm

大きいボタン

btn btn-danger btn-lg

要素関係

・背景色

bg-primary

・サイズを変える

親要素に対して25％の幅にする

w-25

親要素に対して50％の高さにする

h-50

※親要素を定義しないと反映されないので注意！

よく使う色の名前