Bootstrap5 よく使うクラス一覧（早見表）

ブログ運営 #JetTheme #カスタマイズ

Bootstrap 5 に標準で用意されているクラスのうち、よく使うものを一覧にしてみました。

カスタマイズの参考用です。

この一覧のクラスを html に指定することで、Bootstrap 5 標準の CSS が反映されます。

例えば次のようにクラスを指定すると、

<p class="mt-4">テキスト</p>

指定した p タグに、mt-4 つまりmargin-top:1.5remが反映されます。

ブレイクポイント

Bootstrap のブレイクポイントは、モバイルファーストで設定されています。

infix	画面幅	主な想定デバイス
なし	0px 以上	スマートフォン（・タブレット・PC）
sm	576px 以上	タブレット
md	768px 以上	タブレット・PC
lg	992px 以上	PC
xl	1200px 以上	PC
xxl	1400px 以上	PC

sm、md、lg、xl、xxl をレスポンシブ対応のクラスに付け加えると、ブレイクポイントに応じて CSS が反映されます。

例

d-sm-none　（画面幅576px以上で非表示）
text-md-center　（画面幅768px以上でテキスト中央寄せ）
mx-lg-4 （画面幅1200px以上で左右 margin 1.5rem）

Breakpoints (ブレイクポイント) · Bootstrap v5.0

テキスト

左右配置（text-align）

	すべて	≧576px	≧768px	≧992px	≧1200px
左寄せ	text-start	text-sm-start	text-md-start	text-lg-start	text-xl-start
中央寄せ	text-center	text-sm-center	text-md-center	text-lg-center	text-xl-center
右寄せ	text-end	text-sm-end	text-md-end	text-lg-end	text-xl-end

文字の大きさ（font-size）

クラス名	文字サイズ画面幅＜1200px	文字サイズ画面幅≧1200px	表示サンプル
fs-1	calc(1.375rem + 1.5vw)	2.5rem	文字サイズの確認
fs-2	calc(1.325rem + .9vw)	2rem	文字サイズの確認
fs-3	calc(1.3rem + .6vw)	1.75rem	文字サイズの確認
fs-4	calc(1.275rem + .3vw)	1.5rem	文字サイズの確認
fs-5	1.25rem	1.25rem	文字サイズの確認
fs-6	1rem	1rem	文字サイズの確認

calc は計算式を表します。
vw は viewport width の略で、ビューポート（画面）の幅に対する割合です。

calc() - CSS: カスケーディングスタイルシート | MDN

【CSS】vw、vh、vmin、vmaxとは？基本的な使い方 | JAJAAAN

文字の太さ（font-weight）

クラス名	文字の太さ	表示サンプル
fw-bold	太字	文字の確認 123
fw-normal	通常	文字の確認 123
fw-light	細字	文字の確認 123
fw-bolder	親要素より太い	文字の確認 123
fw-lighter	親要素より細い	文字の確認 123

文字のスタイル（font-style）

クラス名	スタイル	表示サンプル
fst-normal	通常	文字の確認 123
fst-italic	斜体	文字の確認 123

文字装飾（text-decoration）

クラス名	文字装飾	表示サンプル
text-decoration-underline	下線	文字の確認 123
text-decoration-line-through	打ち消し線	文字の確認 123
text-decoration-none	文字装飾なし	文字の確認 123

行間（line-height）

クラス名	行間	表示サンプル
lh-1	1	行間の確認行間の確認
lh-sm	1.25	行間の確認行間の確認
lh-base	1.5	行間の確認行間の確認
lh-lg	2	行間の確認行間の確認

色のリセット

クラス名	リセット
text-reset	テキストやリンクの色をリセットし、親要素から継承

Text (テキスト) · Bootstrap v5.0

余白

margin

margin 0

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 0	mt-0	mt-sm-0	mt-md-0	mt-lg-0	mt-xl-0	mt-xxl-0
下 0	mb-0	mb-sm-0	mb-md-0	mb-lg-0	mb-xl-0	mb-xxl-0
左 0	ms-0	ms-sm-0	ms-md-0	ms-lg-0	ms-xl-0	ms-xxl-0
右 0	me-0	me-sm-0	me-md-0	me-lg-0	me-xl-0	me-xxl-0
左右 0	mx-0	mx-sm-0	mx-md-0	mx-lg-0	mx-xl-0	mx-xxl-0
上下 0	my-0	my-sm-0	my-md-0	my-lg-0	my-xl-0	my-xxl-0
全辺 0	m-0	m-sm-0	m-md-0	m-lg-0	m-xl-0	m-xxl-0

※ クラス名は、margin の m の後ろに、上（top）、下（bottom）、左（start）、右（end）の頭文字を付け加えて設定されています。

margin 0.25rem

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 0.25rem	mt-1	mt-sm-1	mt-md-1	mt-lg-1	mt-xl-1	mt-xxl-1
下 0.25rem	mb-1	mb-sm-1	mb-md-1	mb-lg-1	mb-xl-1	mb-xxl-1
左 0.25rem	ms-1	ms-sm-1	ms-md-1	ms-lg-1	ms-xl-1	ms-xxl-1
右 0.25rem	me-1	me-sm-1	me-md-1	me-lg-1	me-xl-1	me-xxl-1
左右 0.25rem	mx-1	mx-sm-1	mx-md-1	mx-lg-1	mx-xl-1	mx-xxl-1
上下 0.25rem	my-1	my-sm-1	my-md-1	my-lg-1	my-xl-1	my-xxl-1
全辺 0.25rem	m-1	m-sm-1	m-md-1	m-lg-1	m-xl-1	m-xxl-1

margin 0.5rem

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 0.5rem	mt-2	mt-sm-2	mt-md-2	mt-lg-2	mt-xl-2	mt-xxl-2
下 0.5rem	mb-2	mb-sm-2	mb-md-2	mb-lg-2	mb-xl-2	mb-xxl-2
左 0.5rem	ms-2	ms-sm-2	ms-md-2	ms-lg-2	ms-xl-2	ms-xxl-2
右 0.5rem	me-2	me-sm-2	me-md-2	me-lg-2	me-xl-2	me-xxl-2
左右 0.5rem	mx-2	mx-sm-2	mx-md-2	mx-lg-2	mx-xl-2	mx-xxl-2
上下 0.5rem	my-2	my-sm-2	my-md-2	my-lg-2	my-xl-2	my-xxl-2
全辺 0.5rem	m-2	m-sm-2	m-md-2	m-lg-2	m-xl-2	m-xxl-2

margin 1rem

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 1rem	mt-3	mt-sm-3	mt-md-3	mt-lg-3	mt-xl-3	mt-xxl-3
下 1rem	mb-3	mb-sm-3	mb-md-3	mb-lg-3	mb-xl-3	mb-xxl-3
左 1rem	ms-3	ms-sm-3	ms-md-3	ms-lg-3	ms-xl-3	ms-xxl-3
右 1rem	me-3	me-sm-3	me-md-3	me-lg-3	me-xl-3	me-xxl-3
左右 1rem	mx-3	mx-sm-3	mx-md-3	mx-lg-3	mx-xl-3	mx-xxl-3
上下 1rem	my-3	my-sm-3	my-md-3	my-lg-3	my-xl-3	my-xxl-3
全辺 1rem	m-3	m-sm-3	m-md-3	m-lg-3	m-xl-3	m-xxl-3

margin 1.5rem

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 1.5rem	mt-4	mt-sm-4	mt-md-4	mt-lg-4	mt-xl-4	mt-xxl-4
下 1.5rem	mb-4	mb-sm-4	mb-md-4	mb-lg-4	mb-xl-4	mb-xxl-4
左 1.5rem	ms-4	ms-sm-4	ms-md-4	ms-lg-4	ms-xl-4	ms-xxl-4
右 1.5rem	me-4	me-sm-4	me-md-4	me-lg-4	me-xl-4	me-xxl-4
左右 1.5rem	mx-4	mx-sm-4	mx-md-4	mx-lg-4	mx-xl-4	mx-xxl-4
上下 1.5rem	my-4	my-sm-4	my-md-4	my-lg-4	my-xl-4	my-xxl-4
全辺 1.5rem	m-4	m-sm-4	m-md-4	m-lg-4	m-xl-4	m-xxl-4

margin 3rem

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 3rem	mt-5	mt-sm-5	mt-md-5	mt-lg-5	mt-xl-5	mt-xxl-5
下 3rem	mb-5	mb-sm-5	mb-md-5	mb-lg-5	mb-xl-5	mb-xxl-5
左 3rem	ms-5	ms-sm-5	ms-md-5	ms-lg-5	ms-xl-5	ms-xxl-5
右 3rem	me-5	me-sm-5	me-md-5	me-lg-5	me-xl-5	me-xxl-5
左右 3rem	mx-5	mx-sm-5	mx-md-5	mx-lg-5	mx-xl-5	mx-xxl-5
上下 3rem	my-5	my-sm-5	my-md-5	my-lg-5	my-xl-5	my-xxl-5
全辺 3rem	m-5	m-sm-5	m-md-5	m-lg-5	m-xl-5	m-xxl-5

margin auto

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 auto	mt-auto	mt-sm-auto	mt-md-auto	mt-lg-auto	mt-xl-auto	mt-xxl-auto
下 auto	mb-auto	mb-sm-auto	mb-md-auto	mb-lg-auto	mb-xl-auto	mb-xxl-auto
左 auto	ms-auto	ms-sm-auto	ms-md-auto	ms-lg-auto	ms-xl-auto	ms-xxl-auto
右 auto	me-auto	me-sm-auto	me-md-auto	me-lg-auto	me-xl-auto	me-xxl-auto
左右 auto	mx-auto	mx-sm-auto	mx-md-auto	mx-lg-auto	mx-xl-auto	mx-xxl-auto
上下 auto	my-auto	my-sm-auto	my-md-auto	my-lg-auto	my-xl-auto	my-xxl-auto
全辺 auto	m-auto	m-sm-auto	m-md-auto	m-lg-auto	m-xl-auto	m-xxl-auto

複数のクラスを指定してレスポンシブにすることができます。

<div class="m-2 m-lg-4">スマホで margin 0.5rem、画面幅992px以上で margin 1.5rem</div>

Spacing(スペーシング) · Bootstrap v5.0

padding

padding 0

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 0	pt-0	pt-sm-0	pt-md-0	pt-lg-0	pt-xl-0	pt-xxl-0
下 0	pb-0	pb-sm-0	pb-md-0	pb-lg-0	pb-xl-0	pb-xxl-0
左 0	ps-0	ps-sm-0	ps-md-0	ps-lg-0	ps-xl-0	ps-xxl-0
右 0	pe-0	pe-sm-0	pe-md-0	pe-lg-0	pe-xl-0	pe-xxl-0
左右 0	px-0	px-sm-0	px-md-0	px-lg-0	px-xl-0	px-xxl-0
上下 0	py-0	py-sm-0	py-md-0	py-lg-0	py-xl-0	py-xxl-0
全辺 0	p-0	p-sm-0	p-md-0	p-lg-0	p-xl-0	p-xxl-0

※ クラス名は、padding の p の後ろに、上（top）、下（bottom）、左（start）、右（end）の頭文字を付け加えて設定されています。

padding 0.25rem

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 0.25rem	pt-1	pt-sm-1	pt-md-1	pt-lg-1	pt-xl-1	pt-xxl-1
下 0.25rem	pb-1	pb-sm-1	pb-md-1	pb-lg-1	pb-xl-1	pb-xxl-1
左 0.25rem	ps-1	ps-sm-1	ps-md-1	ps-lg-1	ps-xl-1	ps-xxl-1
右 0.25rem	pe-1	pe-sm-1	pe-md-1	pe-lg-1	pe-xl-1	pe-xxl-1
左右 0.25rem	px-1	px-sm-1	px-md-1	px-lg-1	px-xl-1	px-xxl-1
上下 0.25rem	py-1	py-sm-1	py-md-1	py-lg-1	py-xl-1	py-xxl-1
全辺 0.25rem	p-1	p-sm-1	p-md-1	p-lg-1	p-xl-1	p-xxl-1

padding 0.5rem

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 0.5rem	pt-2	pt-sm-2	pt-md-2	pt-lg-2	pt-xl-2	pt-xxl-2
下 0.5rem	pb-2	pb-sm-2	pb-md-2	pb-lg-2	pb-xl-2	pb-xxl-2
左 0.5rem	ps-2	ps-sm-2	ps-md-2	ps-lg-2	ps-xl-2	ps-xxl-2
右 0.5rem	pe-2	pe-sm-2	pe-md-2	pe-lg-2	pe-xl-2	pe-xxl-2
左右 0.5rem	px-2	px-sm-2	px-md-2	px-lg-2	px-xl-2	px-xxl-2
上下 0.5rem	py-2	py-sm-2	py-md-2	py-lg-2	py-xl-2	py-xxl-2
全辺 0.5rem	p-2	p-sm-2	p-md-2	p-lg-2	p-xl-2	p-xxl-2

padding 1rem

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 1rem	pt-3	pt-sm-3	pt-md-3	pt-lg-3	pt-xl-3	pt-xxl-3
下 1rem	pb-3	pb-sm-3	pb-md-3	pb-lg-3	pb-xl-3	pb-xxl-3
左 1rem	ps-3	ps-sm-3	ps-md-3	ps-lg-3	ps-xl-3	ps-xxl-3
右 1rem	pe-3	pe-sm-3	pe-md-3	pe-lg-3	pe-xl-3	pe-xxl-3
左右 1rem	px-3	px-sm-3	px-md-3	px-lg-3	px-xl-3	px-xxl-3
上下 1rem	py-3	py-sm-3	py-md-3	py-lg-3	py-xl-3	py-xxl-3
全辺 1rem	p-3	p-sm-3	p-md-3	p-lg-3	p-xl-3	p-xxl-3

padding 1.5rem

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 1.5rem	pt-4	pt-sm-4	pt-md-4	pt-lg-4	pt-xl-4	pt-xxl-4
下 1.5rem	pb-4	pb-sm-4	pb-md-4	pb-lg-4	pb-xl-4	pb-xxl-4
左 1.5rem	ps-4	ps-sm-4	ps-md-4	ps-lg-4	ps-xl-4	ps-xxl-4
右 1.5rem	pe-4	pe-sm-4	pe-md-4	pe-lg-4	pe-xl-4	pe-xxl-4
左右 1.5rem	px-4	px-sm-4	px-md-4	px-lg-4	px-xl-4	px-xxl-4
上下 1.5rem	py-4	py-sm-4	py-md-4	py-lg-4	py-xl-4	py-xxl-4
全辺 1.5rem	p-4	p-sm-4	p-md-4	p-lg-4	p-xl-4	p-xxl-4

padding 3rem

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 3rem	pt-5	pt-sm-5	pt-md-5	pt-lg-5	pt-xl-5	pt-xxl-5
下 3rem	pb-5	pb-sm-5	pb-md-5	pb-lg-5	pb-xl-5	pb-xxl-5
左 3rem	ps-5	ps-sm-5	ps-md-5	ps-lg-5	ps-xl-5	ps-xxl-5
右 3rem	pe-5	pe-sm-5	pe-md-5	pe-lg-5	pe-xl-5	pe-xxl-5
左右 3rem	px-5	px-sm-5	px-md-5	px-lg-5	px-xl-5	px-xxl-5
上下 3rem	py-5	py-sm-5	py-md-5	py-lg-5	py-xl-5	py-xxl-5
全辺 3rem	p-5	p-sm-5	p-md-5	p-lg-5	p-xl-5	p-xxl-5

padding auto

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
上 auto	pt-auto	pt-sm-auto	pt-md-auto	pt-lg-auto	pt-xl-auto	pt-xxl-auto
下 auto	pb-auto	pb-sm-auto	pb-md-auto	pb-lg-auto	pb-xl-auto	pb-xxl-auto
左 auto	ps-auto	ps-sm-auto	ps-md-auto	ps-lg-auto	ps-xl-auto	ps-xxl-auto
右 auto	pe-auto	pe-sm-auto	pe-md-auto	pe-lg-auto	pe-xl-auto	pe-xxl-auto
左右 auto	px-auto	px-sm-auto	px-md-auto	px-lg-auto	px-xl-auto	px-xxl-auto
上下 auto	py-auto	py-sm-auto	py-md-auto	py-lg-auto	py-xl-auto	py-xxl-auto
全辺 auto	p-auto	p-sm-auto	p-md-auto	p-lg-auto	p-xl-auto	p-xxl-auto

複数のクラスをつけてレスポンシブにすることができます。

<div class="p-2 p-sm-3">スマホで padding 0.5rem、画面幅576px以上で padding 1rem</div>

Spacing(スペーシング) · Bootstrap v5.0

線

線を引く（border）

クラス名	線の場所
border	上下左右
border-top	上
border-end	右
border-bottom	下
border-start	左

線の太さ（border-width）

クラス名	線の太さ
border-1	1px
border-2	2px
border-3	3px
border-4	4px
border-5	5px

線の太さは、次のように border クラスと組み合わせて指定します。

<div class="border border-1">1pxの線を引く</div>

他にも、３辺に線を引くクラス、線の色を指定できるクラスがあります。詳細は以下の公式ドキュメント参照。

Borders (ボーダー) · Bootstrap v5.0

角丸（border-radius）

クラス名	角丸の位置	角丸のサイズ
rounded	すべての角	0.25rem
rounded-top	左上・右上	0.25rem
rounded-end	右上・右下	0.25rem
rounded-bottom	右下・左下	0.25rem
rounded-start	左上・左下	0.25rem
rounded-circle	すべての角	50%（円形）
rounded-pill	すべての角	50rem（楕円形）

Borders (ボーダー) · Bootstrap v5.0

影（box-shadow）

クラス名	影の大きさ	box-shadow の値
shadow-none	影なし
shadow-sm	小さい影	0 0.125rem 0.25rem rgba(0,0,0,.075)
shadow	通常の影	0 0.5rem 1rem rgba(0,0,0,.15)
shadow-lg	大きい影	0 1rem 3rem rgba(0,0,0,.175)

小さい影

通常の影

大きい影

Shadows(シャドウ) · Bootstrap v5.0

ディスプレイ（display）

	≧0px	≧576px	≧768px	≧992px	≧1200px	≧1400px
非表示	d-none	d-sm-none	d-md-none	d-lg-none	d-xl-none	d-xxl-none
インライン	d-inline	d-sm-inline	d-md-inline	d-lg-inline	d-xl-inline	d-xxl-inline
インラインブロック	d-inline-block	d-sm-inline-block	d-md-inline-block	d-lg-inline-block	d-xl-inline-block	d-xxl-inline-block
ブロック	d-block	d-sm-block	d-md-block	d-lg-block	d-xl-block	d-xxl-block
グリッド	d-grid	d-sm-grid	d-md-grid	d-lg-grid	d-xl-grid	d-xxl-grid
テーブル	d-table	d-sm-table	d-md-table	d-lg-table	d-xl-table	d-xxl-table
テーブルセル	d-table-cell	d-sm-table-cell	d-md-table-cell	d-lg-table-cell	d-xl-table-cell	d-xxl-table-cell
テーブル行	d-table-row	d-sm-table-row	d-md-table-row	d-lg-table-row	d-xl-table-row	d-xxl-table-row
フレックス	d-flex	d-sm-flex	d-md-flex	d-lg-flex	d-xl-flex	d-xxl-flex
インラインフレックス	d-inline-flex	d-sm-inline-flex	d-md-inline-flex	d-lg-inline-flex	d-xl-inline-flex	d-xxl-inline-flex

次のように複数のクラスをうけてレスポンシブにできます。

<div class="d-none d-sm-block">スマホで非表示、画面幅576px以上でブロック要素</div>
<div class="d-block d-sm-none">スマホでブロック要素、画面幅576px以上で非表示</div>

Display property (ディスプレイ) · Bootstrap v5.0

※ Flex レイアウトには詳細クラスが多く設定されています。使う場合は公式サイトを参照ください。

Flex (フレックス) · Bootstrap v5.0

要素のサイズ（width, height）

width を指定

クラス名	横幅
w-25	Width 25%
w-50	Width 50%
w-75	Width 75%
w-100	Width 100%
w-auto	Width auto
mw-100	Max-width 100%

height を指定

クラス名	縦幅
h-25	Height 25%
h-50	Height 50%
h-75	Height 75%
h-100	Height 100%
h-auto	Height auto
mh-100	Max-height 100%

Sizing(サイジング) · Bootstrap v5.0

垂直配置（vertical-align）

要素がインライン、インラインブロック、インラインテーブル、テーブルセルの場合のみに適用されます。

クラス名	垂直配置
align-baseline	baseline
align-top	top
align-middle	middle
align-bottom	bottom
align-text-top	text-top
align-text-bottom	text-bottom

Vertical alignment (垂直配置) · Bootstrap v5.0

ポジション（position）

クラス名	position
position-static	通常
position-relative	相対位置を指定
position-absolute	絶対位置を指定
position-fixed	位置を固定
position-sticky	スクロール時に位置を固定
fixed-top	上部に固定
fixed-bottom	下部に固定
sticky-top	スクロール時に上部に固定

スクロール時に上部固定する sticky-top はレスポンシブに対応しています。

クラス名	画面幅
sticky-top	≧0px
sticky-sm-top	≧576px
sticky-md-top	≧768px
sticky-lg-top	≧992px
sticky-xl-top	≧1200px

要素の配置は、次のクラスで指定します。

位置	上から	左から	下から	右から
0	top-0	start-0	bottom-0	end-0
50%	top-50	start-50	bottom-50	end-50
100%	top-100	start-100	bottom-100	end-100

<div class="position-relative">
  <div class="position-absolute top-0 start-0">親要素を基準に上から0、左から0の位置に配置</div>
</div>

Position(ポジション) · Bootstrap v5.0

その他（公式リンクのみ）

表（table）

Tables (テーブル) · Bootstrap v5.0

グリッドシステム・カラム

ボタン

Buttons (ボタン) · Bootstrap v5.0

以上です。

ブログ運営

#JetTheme #カスタマイズ