HTML/CSS

    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