プログラミングで暮らしをハック
ITで暮らしを便利にするブログ
Web制作のノウハウ

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

 

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

 

よく使う色の名前

primary
灰色secondary
success
danger
黄色warning
水色info