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-right576px以上
.text-md-left .text-md-center .text-md-right768px以上
.text-lg-left .text-lg-center .text-lg-right992px以上
.text-xl-left .text-xl-center .text-xl-right1200px以上

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-none576px以上
.float-md-left .float-md-right .float-md-none768px以上
.float-lg-left .float-lg-right .float-lg-none992px以上
.float-xl-left .float-xl-right .float-xl-none1200px以上

コンテンツの中央寄せ

.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

Max-width 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クラスも追加されました。画面サイズ毎にしたい場合はsmmdlgxlを付けて使用もできます。

00.25rem0.5rem1rem1.5rem3remauto
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クラスも追加されました。画面サイズ毎にしたい場合はsmmdlgxlを付けて使用もできます。

00.25rem0.5rem1rem1.5rem3remauto
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

  • リスト1
  • リスト2
  • リスト3
<ul class="list-unstyled">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

list-inline

  • リスト1
  • リスト2
  • リスト3
<ul class="list-inline">
  <li class="list-inline-item">リスト1</li>
  <li class="list-inline-item">リスト2</li>
  <li class="list-inline-item">リスト3</li>
</ul>

画像

rounded

.img-roundedクラスは.roundedに変わりました。

A generic square placeholder image with rounded corners
<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に変わりました。

Generic responsive image
<img src="..." class="img-fluid" alt="Responsive image">
  • URLをコピーしました!
目次