0017

知らなかった!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も!用意されています。