Bootstrap4に用意されているクラス
Bootstrap4の標準で用意されているクラスです。
目次
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">