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

コーディング

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

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

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

左寄せ
<p class="text-left">テキスト</p>

中央寄せテキスト
<p class="text-center">テキスト</p>

右寄せテキスト
<p class="text-right">テキスト</p>

サイズ毎に右左中央を指定できる
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もある
<div class="float-left">...</div>
<div class="float-right">...</div>
<div class="float-none">...</div>

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

ブロックを左右センターにしたい時
<div class="mx-auto">中央寄せ</div>

横幅も調整できます。33.3%があってもいいよね。
<div class="w-25">Width 25%</div>
<div class="w-50">Width 50%</div>
<div class="w-75">Width 75%</div>
<div class="w-100">Width 100%</div>

縦幅もあります。33.3%があってもいいよね。
<div class="h-25">Height 25%</div>
<div class="h-50">Height 50%</div>
<div class="h-75">Height 75%</div>
<div class="h-100">Height 100%</div>

max-width、max-heightも用意されています。
<img class="mw-100" src="">
<img class="mh-100" src="">

画像をレスポンシブ対応にするときによく使いますね。
<img class="img-fluid" src="">

clearfixも!用意されています。
<div class="clearfix"></div>