Bootstrap4に用意されているクラス
2017.10.06 2020.04.26
Bootstrap4の標準で用意されているクラスです。
text-align テキストの左・中央・右寄せ
float コンテンツの左・右寄せ
mx-auto コンテンツの中央寄せ
w-25 w-50 w-75 w-100 width 横幅
h-25 h-50 h-75 h-100 height 高さ
mw-100 max-width:100%
mh-100 max-height:100%
m-* mt-* mr-* mb-* ml-* mx-* my-* margin
p-* pt-* pr-* pb-* pl-* px-* py-* padding
clearfix clearfix
ul li リスト
画像
text-align テキストの左・中央・右寄せ
text-left
左寄せテキスト
<p class="text-left">左寄せテキスト</p>
text-center
中央寄せテキスト
<p class="text-center">中央寄せテキスト</p>
text-right
右寄せテキスト
<p class="text-right">右寄せテキスト</p>画面サイズ別
Bootstrap4では画面サイズ毎にクラス分けもできるようになりました。
| class | 画面サイズ |
|---|---|
.text-left
.text-center
.text-right
| ベースクラス、576px未満 |
.text-sm-left
.text-sm-center
.text-sm-right
| 576px以上 |
.text-md-left
.text-md-center
.text-md-right
| 768px以上 |
.text-lg-left
.text-lg-center
.text-lg-right
| 992px以上 |
.text-xl-left
.text-xl-center
.text-xl-right
| 1200px以上 |
float コンテンツの左・右寄せ
floatクラスは.pull-left、.pull-rightから名前が変わりました。
float-left
<div class="float-left">...</div>
float-right
<div class="float-right">...</div>float-none
<div class="float-none">...</div>画面サイズ別
Bootstrap4では画面サイズ毎にクラス分けもできるようになりました。
| class | 画面サイズ |
|---|---|
.float-left
.float-right
.float-none
| ベースクラス、576px未満 |
.float-sm-left
.float-sm-right
.float-sm-none
| 576px以上 |
.float-md-left
.float-md-right
.float-md-none
| 768px以上 |
.float-lg-left
.float-lg-right
.float-lg-none
| 992px以上 |
.float-xl-left
.float-xl-right
.float-xl-none
| 1200px以上 |
コンテンツの中央寄せ
.center-blockクラスはなくなりました。
mx-auto
中央寄せ
<div class="mx-auto" style="width: 200px;">
中央寄せ
</div>width 横幅
w-25、w-50、w-75、w-100
Width 25%
Width 50%
Width 75%
Width 100%
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>height 高さ
h-25、h-50、h-75、h-100
Height 25%
Height 50%
Height 75%
Height 100%
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>max-width:100%
mw-100
<img class="mw-100" src="..." alt="Max-width 100%">max-height:100%
mh-100
Max-height 100%
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>margin
Bootstrap4ではmarginクラスも追加されました。画面サイズ毎にしたい場合はsm、md、lg、xlを付けて使用もできます。
| 0 | 0.25rem | 0.5rem | 1rem | 1.5rem | 3rem | auto | |
|---|---|---|---|---|---|---|---|
| margin | .m-0
.m-sm-0
.m-md-0
.m-lg-0
.m-xl-0 |
.m-1
.m-sm-1
.m-md-1
.m-lg-1
.m-xl-1 |
.m-2
.m-sm-2
.m-md-2
.m-lg-2
.m-xl-2 |
.m-3
.m-sm-3
.m-md-3
.m-lg-3
.m-xl-3 |
.m-4
.m-sm-4
.m-md-4
.m-lg-4
.m-xl-4 |
.m-5
.m-sm-5
.m-md-5
.m-lg-5
.m-xl-5 |
.m-auto
.m-sm-auto
.m-md-auto
.m-lg-auto
.m-xl-auto |
| margin-top | .mt-0
.mt-sm-0
.mt-md-0
.mt-lg-0
.mt-xl-0 |
.mt-1
.mt-sm-1
.mt-md-1
.mt-lg-1
.mt-xl-1 |
.mt-2
.mt-sm-2
.mt-md-2
.mt-lg-2
.mt-xl-2 |
.mt-3
.mt-sm-3
.mt-md-3
.mt-lg-3
.mt-xl-3 |
.mt-4
.mt-sm-4
.mt-md-4
.mt-lg-4
.mt-xl-4 |
.mt-5
.mt-sm-5
.mt-md-5
.mt-lg-5
.mt-xl-5 |
.mt-auto
.mt-sm-auto
.mt-md-auto
.mt-lg-auto
.mt-xl-auto |
| margin-right | .mr-0
.mr-sm-0
.mr-md-0
.mr-lg-0
.mr-xl-0 |
.mr-1
.mr-sm-1
.mr-md-1
.mr-lg-1
.mr-xl-1 |
.mr-2
.mr-sm-2
.mr-md-2
.mr-lg-2
.mr-xl-2 |
.mr-3
.mr-sm-3
.mr-md-3
.mr-lg-3
.mr-xl-3 |
.mr-4
.mr-sm-4
.mr-md-4
.mr-lg-4
.mr-xl-4 |
.mr-5
.mr-sm-5
.mr-md-5
.mr-lg-5
.mr-xl-5 |
.mr-auto
.mr-sm-auto
.mr-md-auto
.mr-lg-auto
.mr-xl-auto |
| margin-bottom | .mb-0
.mb-sm-0
.mb-md-0
.mb-lg-0
.mb-xl-0 |
.mb-1
.mb-sm-1
.mb-md-1
.mb-lg-1
.mb-xl-1 |
.mb-2
.mb-sm-2
.mb-md-2
.mb-lg-2
.mb-xl-2 |
.mb-3
.mb-sm-3
.mb-md-3
.mb-lg-3
.mb-xl-3 |
.mb-4
.mb-sm-4
.mb-md-4
.mb-lg-4
.mb-xl-4 |
.mb-5
.mb-sm-5
.mb-md-5
.mb-lg-5
.mb-xl-5 |
.mb-auto
.mb-sm-auto
.mb-md-auto
.mb-lg-auto
.mb-xl-auto |
| margin-left | .ml-0
.ml-sm-0
.ml-md-0
.ml-lg-0
.ml-xl-0 |
.ml-1
.ml-sm-1
.ml-md-1
.ml-lg-1
.ml-xl-1 |
.ml-2
.ml-sm-2
.ml-md-2
.ml-lg-2
.ml-xl-2 |
.ml-3
.ml-sm-3
.ml-md-3
.ml-lg-3
.ml-xl-3 |
.ml-4
.ml-sm-4
.ml-md-4
.ml-lg-4
.ml-xl-4 |
.ml-5
.ml-sm-5
.ml-md-5
.ml-lg-5
.ml-xl-5 |
.ml-auto
.ml-sm-auto
.ml-md-auto
.ml-lg-auto
.ml-xl-auto |
| margin-right margin-left | .mx-0
.mx-sm-0
.mx-md-0
.mx-lg-0
.mx-xl-0 |
.mx-1
.mx-sm-1
.mx-md-1
.mx-lg-1
.mx-xl-1 |
.mx-2
.mx-sm-2
.mx-md-2
.mx-lg-2
.mx-xl-2 |
.mx-3
.mx-sm-3
.mx-md-3
.mx-lg-3
.mx-xl-3 |
.mx-4
.mx-sm-4
.mx-md-4
.mx-lg-4
.mx-xl-4 |
.mx-5
.mx-sm-5
.mx-md-5
.mx-lg-5
.mx-xl-5 |
.mx-auto
.mx-sm-auto
.mx-md-auto
.mx-lg-auto
.mx-xl-auto |
| margin-top margin-bottom | .my-0
.my-sm-0
.my-md-0
.my-lg-0
.my-xl-0 |
.my-1
.my-sm-1
.my-md-1
.my-lg-1
.my-xl-1 |
.my-2
.my-sm-2
.my-md-2
.my-lg-2
.my-xl-2 |
.my-3
.my-sm-3
.my-md-3
.my-lg-3
.my-xl-3 |
.my-4
.my-sm-4
.my-md-4
.my-lg-4
.my-xl-4 |
.my-5
.my-sm-5
.my-md-5
.my-lg-5
.my-xl-5 |
.my-auto
.my-sm-auto
.my-md-auto
.my-lg-auto
.my-xl-auto |
padding
Bootstrap4ではpaddingクラスも追加されました。画面サイズ毎にしたい場合はsm、md、lg、xlを付けて使用もできます。
| 0 | 0.25rem | 0.5rem | 1rem | 1.5rem | 3rem | auto | |
|---|---|---|---|---|---|---|---|
| padding | .p-0
.p-sm-0
.p-md-0
.p-lg-0
.p-xl-0 |
.p-1
.p-sm-1
.p-md-1
.p-lg-1
.p-xl-1 |
.p-2
.p-sm-2
.p-md-2
.p-lg-2
.p-xl-2 |
.p-3
.p-sm-3
.p-md-3
.p-lg-3
.p-xl-3 |
.p-4
.p-sm-4
.p-md-4
.p-lg-4
.p-xl-4 |
.p-5
.p-sm-5
.p-md-5
.p-lg-5
.p-xl-5 |
.p-auto
.p-sm-auto
.p-md-auto
.p-lg-auto
.p-xl-auto |
| padding-top | .pt-0
.pt-sm-0
.pt-md-0
.pt-lg-0
.pt-xl-0 |
.pt-1
.pt-sm-1
.pt-md-1
.pt-lg-1
.pt-xl-1 |
.pt-2
.pt-sm-2
.pt-md-2
.pt-lg-2
.pt-xl-2 |
.pt-3
.pt-sm-3
.pt-md-3
.pt-lg-3
.pt-xl-3 |
.pt-4
.pt-sm-4
.pt-md-4
.pt-lg-4
.pt-xl-4 |
.pt-5
.pt-sm-5
.pt-md-5
.pt-lg-5
.pt-xl-5 |
.pt-auto
.pt-sm-auto
.pt-md-auto
.pt-lg-auto
.pt-xl-auto |
| padding-right | .pr-0
.pr-sm-0
.pr-md-0
.pr-lg-0
.pr-xl-0 |
.pr-1
.pr-sm-1
.pr-md-1
.pr-lg-1
.pr-xl-1 |
.pr-2
.pr-sm-2
.pr-md-2
.pr-lg-2
.pr-xl-2 |
.pr-3
.pr-sm-3
.pr-md-3
.pr-lg-3
.pr-xl-3 |
.pr-4
.pr-sm-4
.pr-md-4
.pr-lg-4
.pr-xl-4 |
.pr-5
.pr-sm-5
.pr-md-5
.pr-lg-5
.pr-xl-5 |
.pr-auto
.pr-sm-auto
.pr-md-auto
.pr-lg-auto
.pr-xl-auto |
| padding-bottom | .pb-0
.pb-sm-0
.pb-md-0
.pb-lg-0
.pb-xl-0 |
.pb-1
.pb-sm-1
.pb-md-1
.pb-lg-1
.pb-xl-1 |
.pb-2
.pb-sm-2
.pb-md-2
.pb-lg-2
.pb-xl-2 |
.pb-3
.pb-sm-3
.pb-md-3
.pb-lg-3
.pb-xl-3 |
.pb-4
.pb-sm-4
.pb-md-4
.pb-lg-4
.pb-xl-4 |
.pb-5
.pb-sm-5
.pb-md-5
.pb-lg-5
.pb-xl-5 |
.pb-auto
.pb-sm-auto
.pb-md-auto
.pb-lg-auto
.pb-xl-auto |
| padding-left | .pl-0
.pl-sm-0
.pl-md-0
.pl-lg-0
.pl-xl-0 |
.pl-1
.pl-sm-1
.pl-md-1
.pl-lg-1
.pl-xl-1 |
.pl-2
.pl-sm-2
.pl-md-2
.pl-lg-2
.pl-xl-2 |
.pl-3
.pl-sm-3
.pl-md-3
.pl-lg-3
.pl-xl-3 |
.pl-4
.pl-sm-4
.pl-md-4
.pl-lg-4
.pl-xl-4 |
.pl-5
.pl-sm-5
.pl-md-5
.pl-lg-5
.pl-xl-5 |
.pl-auto
.pl-sm-auto
.pl-md-auto
.pl-lg-auto
.pl-xl-auto |
| padding-right padding-left | .px-0
.px-sm-0
.px-md-0
.px-lg-0
.px-xl-0 |
.px-1
.px-sm-1
.px-md-1
.px-lg-1
.px-xl-1 |
.px-2
.px-sm-2
.px-md-2
.px-lg-2
.px-xl-2 |
.px-3
.px-sm-3
.px-md-3
.px-lg-3
.px-xl-3 |
.px-4
.px-sm-4
.px-md-4
.px-lg-4
.px-xl-4 |
.px-5
.px-sm-5
.px-md-5
.px-lg-5
.px-xl-5 |
.px-auto
.px-sm-auto
.px-md-auto
.px-lg-auto
.px-xl-auto |
| padding-top padding-bottom | .py-0
.py-sm-0
.py-md-0
.py-lg-0
.py-xl-0 |
.py-1
.py-sm-1
.py-md-1
.py-lg-1
.py-xl-1 |
.py-2
.py-sm-2
.py-md-2
.py-lg-2
.py-xl-2 |
.py-3
.py-sm-3
.py-md-3
.py-lg-3
.py-xl-3 |
.py-4
.py-sm-4
.py-md-4
.py-lg-4
.py-xl-4 |
.py-5
.py-sm-5
.py-md-5
.py-lg-5
.py-xl-5 |
.py-auto
.py-sm-auto
.py-md-auto
.py-lg-auto
.py-xl-auto |
clearfix
clearfix
<div class="clearfix">...</div>ul li リスト
list-unstyled
- リスト１
- リスト２
- リスト３
<ul class="list-unstyled">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>list-inline
- リスト１
- リスト２
- リスト３
<ul class="list-inline">
<li class="list-inline-item">リスト１</li>
<li class="list-inline-item">リスト２</li>
<li class="list-inline-item">リスト３</li>
</ul>画像
rounded
.img-roundedクラスは.roundedに変わりました。
<img src="..." class="rounded" alt="...">
img-thumbnail
<img src="..." alt="..." class="img-thumbnail">rounded-circle
.img-circleクラスは.rounded-circleに変わりました。
<img src="..." alt="..." class="rounded-circle">img-fluid
.img-responsiveクラスは.img-fluidに変わりました。
<img src="..." class="img-fluid" alt="Responsive image">