2017/10/06  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>
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

width 横幅

w-25、w-50、w-75、w-100

.w-25 {
  width: 25% !important;
}
.w-50 {
  width: 50% !important;
}
.w-75 {
  width: 75% !important;
}
.w-100 {
  width: 100% !important;
}
class width
.w-25 25%
.w-50 50%
.w-75 75%
.w-100 100%

height 高さ

h-25、h-50、h-75、h-100

.h-25 {
  height: 25% !important;
}
.h-50 {
  height: 50% !important;
}
.h-75 {
  height: 75% !important;
}
.h-100 {
  height: 100% !important;
}
class height
.h-25 25%
.h-50 50%
.h-75 75%
.h-100 100%

max-width:100%

mw-100

.mw-100 {
  max-width: 100% !important;
}

max-height:100%

mh-100

.mh-100 {
  max-height: 100% !important;
}

margin

Bootstrap4ではmarginクラスも追加されました。画面サイズ毎にしたい場合はsmmdlgxlを付けて使用もできます。

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

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

  • リスト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>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

画像

img-rounded

<img src="..." alt="..." class="img-rounded">

img-circle

<img src="..." alt="..." class="img-circle">

img-thumbnail

<img src="..." alt="..." class="img-thumbnail">

img-responsive

.img-responsiveでレスポンシブに画像を調節してくれます。

imgsample

<img src="..." class="img-responsive" >