2690

知らなかった!Bootstrap4に用意されているクラス

知らなかった!Bootstrap4に用意されているクラス

2019.6.9

知らなかった!Bootstrap4に用意されているクラス

Bootstrap4には、実はいろいろなクラスが用意されているんですね。知りませんでした。
Bootstrap4には大量のクラスが用意されていますが、個人的に忘れがち&今後使っていこう&CSS記述の代替として個人的なメモをしていきます。

めんどくさいので、全体をコード記述にしていきます。(随時更新)

左寄せ

テキスト

中央寄せテキスト

テキスト

右寄せテキスト

テキスト

サイズ毎に右左中央を指定できる
text-left 、 text-center 、 text-right
text-sm-left 、 text-sm-center 、 text-sm-right
text-md-left 、 text-md-center 、 text-md-right
text-lg-left 、 text-lg-enter 、 text-lg-right
text-xl-left 、 text-xl-center 、 text-xl-right

最近は使用頻度は減ったが、floatもある

...
...
...

floatもサイズ毎に指定できる
float-left 、 float-center 、 float-right
float-sm-left 、 float-sm-center 、 float-sm-right
float-md-left 、 float-md-center 、 float-md-right
float-lg-left 、 tfloat-lg-enter 、 float-lg-right
float-xl-left 、 float-xl-center 、 float-xl-right

ブロックを左右センターにしたい時

中央寄せ

横幅も調整できます。33.3%があってもいいよね。

Width 25%
Width 50%
Width 75%
Width 100%

縦幅もあります。33.3%があってもいいよね。

Height 25%
Height 50%
Height 75%
Height 100%

max-width、max-heightも用意されています。

画像をレスポンシブ対応にするときによく使いますね。

clearfixも!用意されています。