Bootstrap4に用意されているクラス

2017.10.06  2018.03.08

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

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を付けて使用もできます。

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 class="list-inline-item">リスト1</li>
  <li class="list-inline-item">リスト2</li>
  <li class="list-inline-item">リスト3</li>
</ul>

画像

rounded

A generic square placeholder image with rounded corners
<img src="..." class="rounded" alt="...">

img-thumbnail

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

img-fluid

Generic responsive image
<img src="..." class="img-fluid" alt="Responsive image">

関連記事