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

Bootstrap5の標準で用意されているクラスです。

目次

text-align テキストの左・中央・右寄せ

textの左右寄せは.text-left .text-rightから.text-start .text-endに名前が変わりました。

text-left → text-start

.text-left.text-start に変更になりました。

左寄せテキスト

<p class="text-start">左寄せテキスト</p>

text-center

中央寄せテキスト

<p class="text-center">中央寄せテキスト</p>

text-right → text-end

.text-right.text-end に変更になりました。

右寄せテキスト

<p class="text-end">右寄せテキスト</p>

画面サイズ別

Bootstrap5の画面サイズ毎クラス分けは以下になります。

class 画面サイズ
.text-start .text-center .text-end ベースクラス、576px未満
.text-sm-start .text-sm-center .text-sm-end 576px以上
.text-md-start .text-md-center .text-md-end 768px以上
.text-lg-start .text-lg-center .text-lg-end 992px以上
.text-xl-start .text-xl-center .text-xl-end 1200px以上
.text-xxl-start .text-xxl-center .text-xxl-end 1400px以上

float コンテンツの左・右寄せ

floatクラスは.float-left .float-rightから.float-start .float-endに名前が変わりました。

float-left → float-start

<div class="float-start">...</div>

float-right → float-end

<div class="float-end">...</div>

float-none

<div class="float-none">...</div>

画面サイズ別

Bootstrap5の画面サイズ毎クラス分けは以下になります。

class 画面サイズ
.float-start .float-end .float-none ベースクラス、576px未満
.float-sm-start .float-sm-end .float-sm-none 576px以上
.float-md-start .float-md-end .float-md-none 768px以上
.float-lg-start .float-lg-end .float-lg-none 992px以上
.float-xl-start .float-xl-end .float-xl-none 1200px以上
.float-xxl-start .float-xxl-end .float-xxl-none 1400px以上

margin

Bootstrap5のmarginクラスはxxlが追加されたのと、.ml-* .mr-* の名前が .ms-* .me-* に変わりました。

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-xxl-0
.m-1
.m-sm-1
.m-md-1
.m-lg-1
.m-xl-1
.m-xxl-1
.m-2
.m-sm-2
.m-md-2
.m-lg-2
.m-xl-2
.m-xxl-2
.m-3
.m-sm-3
.m-md-3
.m-lg-3
.m-xl-3
.m-xxl-3
.m-4
.m-sm-4
.m-md-4
.m-lg-4
.m-xl-4
.m-xxl-4
.m-5
.m-sm-5
.m-md-5
.m-lg-5
.m-xl-5
.m-xxl-5
.m-auto
.m-sm-auto
.m-md-auto
.m-lg-auto
.m-xl-auto
.m-xxl-auto
margin-top .mt-0
.mt-sm-0
.mt-md-0
.mt-lg-0
.mt-xl-0
.mt-xxl-0
.mt-1
.mt-sm-1
.mt-md-1
.mt-lg-1
.mt-xl-1
.mt-xxl-1
.mt-2
.mt-sm-2
.mt-md-2
.mt-lg-2
.mt-xl-2
.mt-xxl-2
.mt-3
.mt-sm-3
.mt-md-3
.mt-lg-3
.mt-xl-3
.mt-xxl-3
.mt-4
.mt-sm-4
.mt-md-4
.mt-lg-4
.mt-xl-4
.mt-xxl-4
.mt-5
.mt-sm-5
.mt-md-5
.mt-lg-5
.mt-xl-5
.mt-xxl-5
.mt-auto
.mt-sm-auto
.mt-md-auto
.mt-lg-auto
.mt-xl-auto
.mt-xxl-auto
margin-right .me-0
.me-sm-0
.me-md-0
.me-lg-0
.me-xl-0
.me-xxl-0
.me-1
.me-sm-1
.me-md-1
.me-lg-1
.me-xl-1
.me-xxl-1
.me-2
.me-sm-2
.me-md-2
.me-lg-2
.me-xl-2
.me-xxl-2
.me-3
.me-sm-3
.me-md-3
.me-lg-3
.me-xl-3
.me-xxl-3
.me-4
.me-sm-4
.me-md-4
.me-lg-4
.me-xl-4
.me-xxl-4
.me-5
.me-sm-5
.me-md-5
.me-lg-5
.me-xl-5
.me-xxl-5
.me-auto
.me-sm-auto
.me-md-auto
.me-lg-auto
.me-xl-auto
.me-xxl-auto
margin-bottom .mb-0
.mb-sm-0
.mb-md-0
.mb-lg-0
.mb-xl-0
.mb-xxl-0
.mb-1
.mb-sm-1
.mb-md-1
.mb-lg-1
.mb-xl-1
.mb-xxl-1
.mb-2
.mb-sm-2
.mb-md-2
.mb-lg-2
.mb-xl-2
.mb-xxl-2
.mb-3
.mb-sm-3
.mb-md-3
.mb-lg-3
.mb-xl-3
.mb-xxl-3
.mb-4
.mb-sm-4
.mb-md-4
.mb-lg-4
.mb-xl-4
.mb-xxl-4
.mb-5
.mb-sm-5
.mb-md-5
.mb-lg-5
.mb-xl-5
.mb-xxl-5
.mb-auto
.mb-sm-auto
.mb-md-auto
.mb-lg-auto
.mb-xl-auto
.mb-xxl-auto
margin-left .ms-0
.ms-sm-0
.ms-md-0
.ms-lg-0
.ms-xl-0
.ms-xxl-0
.ms-1
.ms-sm-1
.ms-md-1
.ms-lg-1
.ms-xl-1
.ms-xxl-1
.ms-2
.ms-sm-2
.ms-md-2
.ms-lg-2
.ms-xl-2
.ms-xxl-2
.ms-3
.ms-sm-3
.ms-md-3
.ms-lg-3
.ms-xl-3
.ms-xxl-3
.ms-4
.ms-sm-4
.ms-md-4
.ms-lg-4
.ms-xl-4
.ms-xxl-4
.ms-5
.ms-sm-5
.ms-md-5
.ms-lg-5
.ms-xl-5
.ms-xxl-5
.ms-auto
.ms-sm-auto
.ms-md-auto
.ms-lg-auto
.ms-xl-auto
.ms-xxl-auto
margin-right margin-left .mx-0
.mx-sm-0
.mx-md-0
.mx-lg-0
.mx-xl-0
.mx-xxl-0
.mx-1
.mx-sm-1
.mx-md-1
.mx-lg-1
.mx-xl-1
.mx-xxl-1
.mx-2
.mx-sm-2
.mx-md-2
.mx-lg-2
.mx-xl-2
.mx-xxl-2
.mx-3
.mx-sm-3
.mx-md-3
.mx-lg-3
.mx-xl-3
.mx-xxl-3
.mx-4
.mx-sm-4
.mx-md-4
.mx-lg-4
.mx-xl-4
.mx-xxl-4
.mx-5
.mx-sm-5
.mx-md-5
.mx-lg-5
.mx-xl-5
.mx-xxl-5
.mx-auto
.mx-sm-auto
.mx-md-auto
.mx-lg-auto
.mx-xl-auto
.mx-xxl-auto
margin-top margin-bottom .my-0
.my-sm-0
.my-md-0
.my-lg-0
.my-xl-0
.my-xxl-0
.my-1
.my-sm-1
.my-md-1
.my-lg-1
.my-xl-1
.my-xxl-1
.my-2
.my-sm-2
.my-md-2
.my-lg-2
.my-xl-2
.my-xxl-2
.my-3
.my-sm-3
.my-md-3
.my-lg-3
.my-xl-3
.my-xxl-3
.my-4
.my-sm-4
.my-md-4
.my-lg-4
.my-xl-4
.my-xxl-4
.my-5
.my-sm-5
.my-md-5
.my-lg-5
.my-xl-5
.my-xxl-5
.my-auto
.my-sm-auto
.my-md-auto
.my-lg-auto
.my-xl-auto
.my-xxl-auto

padding

Bootstrap5のpaddingクラスはxxlが追加されたのと、.pl-* .pr-* の名前が .ps-* .pe-* に変わりました。

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-xxl-0
.p-1
.p-sm-1
.p-md-1
.p-lg-1
.p-xl-1
.p-xxl-1
.p-2
.p-sm-2
.p-md-2
.p-lg-2
.p-xl-2
.p-xxl-2
.p-3
.p-sm-3
.p-md-3
.p-lg-3
.p-xl-3
.p-xxl-3
.p-4
.p-sm-4
.p-md-4
.p-lg-4
.p-xl-4
.p-xxl-4
.p-5
.p-sm-5
.p-md-5
.p-lg-5
.p-xl-5
.p-xxl-5
.p-auto
.p-sm-auto
.p-md-auto
.p-lg-auto
.p-xl-auto
.p-xxl-auto
padding-top .pt-0
.pt-sm-0
.pt-md-0
.pt-lg-0
.pt-xl-0
.pt-xxl-0
.pt-1
.pt-sm-1
.pt-md-1
.pt-lg-1
.pt-xl-1
.pt-xxl-1
.pt-2
.pt-sm-2
.pt-md-2
.pt-lg-2
.pt-xl-2
.pt-xxl-2
.pt-3
.pt-sm-3
.pt-md-3
.pt-lg-3
.pt-xl-3
.pt-xxl-3
.pt-4
.pt-sm-4
.pt-md-4
.pt-lg-4
.pt-xl-4
.pt-xxl-4
.pt-5
.pt-sm-5
.pt-md-5
.pt-lg-5
.pt-xl-5
.pt-xxl-5
.pt-auto
.pt-sm-auto
.pt-md-auto
.pt-lg-auto
.pt-xl-auto
.pt-xxl-auto
padding-right .pe-0
.pe-sm-0
.pe-md-0
.pe-lg-0
.pe-xl-0
.pe-xxl-0
.pe-1
.pe-sm-1
.pe-md-1
.pe-lg-1
.pe-xl-1
.pe-xxl-1
.pe-2
.pe-sm-2
.pe-md-2
.pe-lg-2
.pe-xl-2
.pe-xxl-2
.pe-3
.pe-sm-3
.pe-md-3
.pe-lg-3
.pe-xl-3
.pe-xxl-3
.pe-4
.pe-sm-4
.pe-md-4
.pe-lg-4
.pe-xl-4
.pe-xxl-4
.pe-5
.pe-sm-5
.pe-md-5
.pe-lg-5
.pe-xl-5
.pe-xxl-5
.pe-auto
.pe-sm-auto
.pe-md-auto
.pe-lg-auto
.pe-xl-auto
.pe-xxl-auto
padding-bottom .pb-0
.pb-sm-0
.pb-md-0
.pb-lg-0
.pb-xl-0
.pb-xxl-0
.pb-1
.pb-sm-1
.pb-md-1
.pb-lg-1
.pb-xl-1
.pb-xxl-1
.pb-2
.pb-sm-2
.pb-md-2
.pb-lg-2
.pb-xl-2
.pb-xxl-2
.pb-3
.pb-sm-3
.pb-md-3
.pb-lg-3
.pb-xl-3
.pb-xxl-3
.pb-4
.pb-sm-4
.pb-md-4
.pb-lg-4
.pb-xl-4
.pb-xxl-4
.pb-5
.pb-sm-5
.pb-md-5
.pb-lg-5
.pb-xl-5
.pb-xxl-5
.pb-auto
.pb-sm-auto
.pb-md-auto
.pb-lg-auto
.pb-xl-auto
.pb-xxl-auto
padding-left .ps-0
.ps-sm-0
.ps-md-0
.ps-lg-0
.ps-xl-0
.ps-xxl-0
.ps-1
.ps-sm-1
.ps-md-1
.ps-lg-1
.ps-xl-1
.ps-xxl-1
.ps-2
.ps-sm-2
.ps-md-2
.ps-lg-2
.ps-xl-2
.ps-xxl-2
.ps-3
.ps-sm-3
.ps-md-3
.ps-lg-3
.ps-xl-3
.ps-xxl-3
.ps-4
.ps-sm-4
.ps-md-4
.ps-lg-4
.ps-xl-4
.ps-xxl-4
.ps-5
.ps-sm-5
.ps-md-5
.ps-lg-5
.ps-xl-5
.ps-xxl-5
.ps-auto
.ps-sm-auto
.ps-md-auto
.ps-lg-auto
.ps-xl-auto
.ps-xxl-auto
padding-right padding-left .px-0
.px-sm-0
.px-md-0
.px-lg-0
.px-xl-0
.px-xxl-0
.px-1
.px-sm-1
.px-md-1
.px-lg-1
.px-xl-1
.px-xxl-1
.px-2
.px-sm-2
.px-md-2
.px-lg-2
.px-xl-2
.px-xxl-2
.px-3
.px-sm-3
.px-md-3
.px-lg-3
.px-xl-3
.px-xxl-3
.px-4
.px-sm-4
.px-md-4
.px-lg-4
.px-xl-4
.px-xxl-4
.px-5
.px-sm-5
.px-md-5
.px-lg-5
.px-xl-5
.px-xxl-5
.px-auto
.px-sm-auto
.px-md-auto
.px-lg-auto
.px-xl-auto
.px-xxl-auto
padding-top padding-bottom .py-0
.py-sm-0
.py-md-0
.py-lg-0
.py-xl-0
.py-xxl-0
.py-1
.py-sm-1
.py-md-1
.py-lg-1
.py-xl-1
.py-xxl-1
.py-2
.py-sm-2
.py-md-2
.py-lg-2
.py-xl-2
.py-xxl-2
.py-3
.py-sm-3
.py-md-3
.py-lg-3
.py-xl-3
.py-xxl-3
.py-4
.py-sm-4
.py-md-4
.py-lg-4
.py-xl-4
.py-xxl-4
.py-5
.py-sm-5
.py-md-5
.py-lg-5
.py-xl-5
.py-xxl-5
.py-auto
.py-sm-auto
.py-md-auto
.py-lg-auto
.py-xl-auto
.py-xxl-auto
あわせて読みたい
Bootstrap4に用意されているクラス Bootstrap4の標準で用意されているクラスです。 text-align テキストの左・中央・右寄せ text-left 左寄せテキスト <p class="text-left">左寄せテキ...
  • URLをコピーしました!
目次