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">左寄せテキ...