Bootstrap5 よく使うクラス一覧(早見表)

Bootstrap5 よく使うクラス一覧(早見表)

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)

テキスト

左右配置(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 の略で、ビューポート(画面)の幅に対する割合です。

文字の太さ(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 テキストやリンクの色をリセットし、親要素から継承

余白

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>

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>

線を引く(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>

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

角丸(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(楕円形)

影(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)
小さい影
通常の影
大きい影

ディスプレイ(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>

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

要素のサイズ(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%

垂直配置(vertical-align)

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

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

ポジション(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>

その他(公式リンクのみ)

表(table)

関連記事:Bootstrap5/tableタグがレスポンシブにならない場合の対処法

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

ボタン

以上です。

NEXT PREV