Padding CSS

Bootstrapではパディング(要素の内側の余白)を指定できるユーティリティクラスが用意されています。

Cheat sheet

Bootstrap CSSフレームワークでは、次のクラスを指定することによってパディングを設定できます。

方向
サイズ
<div class="p-auto border">Padding</div>
Padding

Class

パディングを指定するために、次のユーティリティクラスを用意されています。

Bootstrapのpaddingクラス
クラス CSSプロパティ
p-auto padding: auto;
p-0 padding: 0;
p-1 padding: 0.25rem;
p-2 padding: 0.5rem;
p-3 padding: 1rem;
p-4 padding: 1.5rem;
p-5 padding: 3rem;
pt-auto padding-top: auto;
pt-0 padding-top: 0;
pt-1 padding-top: 0.25rem;
pt-2 padding-top: 0.5rem;
pt-3 padding-top: 1rem;
pt-4 padding-top: 1.5rem;
pt-5 padding-top: 3rem;
pr-auto padding-right: auto;
pr-0 padding-right: 0;
pr-1 padding-right: 0.25rem;
pr-2 padding-right: 0.5rem;
pr-3 padding-right: 1rem;
pr-4 padding-right: 1.5rem;
pr-5 padding-right: 3rem;
pb-auto padding-bottom: auto;
pb-0 padding-bottom: 0;
pb-1 padding-bottom: 0.25rem;
pb-2 padding-bottom: 0.5rem;
pb-3 padding-bottom: 1rem;
pb-4 padding-bottom: 1.5rem;
pb-5 padding-bottom: 3rem;
pl-auto padding-left: auto;
pl-0 padding-left: 0;
pl-1 padding-left: 0.25rem;
pl-2 padding-left: 0.5rem;
pl-3 padding-left: 1rem;
pl-4 padding-left: 1.5rem;
pl-5 padding-left: 3rem;
px-auto padding-right: auto;
padding-left: auto;
px-0 padding-right: 0;
padding-left: 0;
px-1 padding-right: 0.25rem;
padding-left: 0.25rem;
px-2 padding-right: 0.5rem;
padding-left: 0.5rem;
px-3 padding-right: 1rem;
padding-left: 1rem;
px-4 padding-right: 1.5rem;
padding-left: 1.5rem;
px-5 padding-right: 3rem;
padding-left: 3rem;
py-auto padding-top: auto;
padding-bottom: auto;
py-0 padding-top: 0;
padding-bottom: 0;
py-1 padding-top: 0.25rem;
padding-bottom: 0.25rem;
py-2 padding-top: 0.5rem;
padding-bottom: 0.5rem;
py-3 padding-top: 1rem;
padding-bottom: 1rem;
py-4 padding-top: 1.5rem;
padding-bottom: 1.5rem;
py-5 padding-top: 3rem;
padding-bottom: 3rem;