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

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

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

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

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

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

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

目次

ブレイクポイント

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

infix 画面幅 主な想定デバイス
なし 576px 未満 スマートフォン
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)

クラス名 text-align
text-start 左寄せ
text-center 中央寄せ
text-end 右寄せ

ブレイクポイント別のクラス

text-align 576px以上 768px以上 992px以上 1200px以上
左寄せ text-sm-start text-md-start text-lg-start text-xl-start
中央寄せ text-sm-center text-md-center text-lg-center text-xl-center
右寄せ text-sm-end text-md-end text-lg-end text-xl-end

文字の太さ(font-weight)

クラス名 文字の太さ
fw-bold 太字
fw-normal 通常
fw-light 細字
fw-bolder 親要素より太い
fw-lighter 親要素より細い

文字のスタイル(font-style)

クラス名 スタイル
fst-normal 通常
fst-italic 斜体

文字装飾(text-decoration)

クラス名 文字装飾
text-decoration-underline 下線
text-decoration-line-through 打ち消し線
text-decoration-none 文字装飾なし

行間(line-height)

クラス名 行間
lh-1 1
lh-sm 1.25
lh-base 1.5
lh-lg 2

色のリセット

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

余白

margin

上下左右同じ値の margin を指定したい場合

クラス名 margin
m-0 0
m-1 0.25rem
m-2 0.5rem
m-3 1rem
m-4 1.5rem
m-5 3rem
m-auto auto

上下左右のうち、一箇所だけ margin を指定したい場合

margin
0 mt-0 mb-0 ms-0 me-0
0.25rem mt-1 mb-1 ms-1 me-1
0.5rem mt-2 mb-2 ms-2 me-2
1rem mt-3 mb-3 ms-3 me-3
1.5rem mt-4 mb-4 ms-4 me-4
3rem mt-5 mb-5 ms-5 me-5
auto mt-auto mb-auto ms-auto me-auto

※ m(margin)の後ろに、上:t(top)、下:b(bottom)、左:s(start)、右:e(end) が加わったクラス名になっています

左右のみ、上下のみに margin を指定したい場合

margin 左右 上下
0 mx-0 my-0
0.25rem mx-1 my-1
0.5rem mx-2 my-2
1rem mx-3 my-3
1.5rem mx-4 my-4
3rem mx-5 my-5
auto mx-auto my-auto

ブレイクポイントを組み合わせて、レスポンシブに変更可能です。

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

padding

padding も、margin と同様に指定します。

上下左右同じ値の padding を指定したい場合

クラス名 padding
p-0 0
p-1 0.25rem
p-2 0.5rem
p-3 1rem
p-4 1.5rem
p-5 3rem
p-auto auto

上下左右のうち、一箇所だけ padding を指定したい場合

padding
0 pt-0 pb-0 ps-0 pe-0
0.25rem pt-1 pb-1 ps-1 pe-1
0.5rem pt-2 pb-2 ps-2 pe-2
1rem pt-3 pb-3 ps-3 pe-3
1.5rem pt-4 pb-4 ps-4 pe-4
3rem pt-5 pb-5 ps-5 pe-5
auto pt-auto pb-auto ps-auto pe-auto

左右のみ、上下のみに padding を指定したい場合

padding 左右 上下
0 px-0 py-0
0.25rem px-1 py-1
0.5rem px-2 py-2
1rem px-3 py-3
1.5rem px-4 py-4
3rem px-5 py-5
auto px-auto py-auto

ブレイクポイントを組み合わせて、レスポンシブに変更可能です。

<div class="ps-2 ps-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)

クラス名 display
d-none 非表示
d-inline インライン要素
d-inline-block インラインブロック要素
d-block ブロック要素
d-grid グリッドレイアウト
d-table テーブルレイアウト
d-table-cell テーブルセル
d-table-row テーブル行
d-flex フレックスレイアウト
d-inline-flex インラインフレックス

ブレイクポイント別のクラス

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

※上記の表では省略しましたが、xxl-を指定することもできます。

また、次のように2種類以上のクラスを使うことで、複数のブレイクポイントを指定できます。

<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

height を指定

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

max-width: 100%、max-height: 100% を指定

クラス名 max 100%
mw-100 Max-width 100%
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 スクロール時に位置を固定

固定に関しては、以下のクラスもあります。

クラス名 position
fixed-top 上部に固定
fixed-bottom 下部に固定
sticky-top スクロール時に上部固定

sticky-top に関しては、レスポンシブがあります。

クラス名 画面幅
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タグがレスポンシブにならない場合の対処法

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

ボタン

以上です。

こちらの記事もよく読まれています
ブログに画像を載せるときに知っておきたいこと

ブログに画像を載せるときに知っておきたいこと

今回は、画像をブログに載せるときの注意点を紹介します。 画像を適切に載せることでページ表示速度の向上が見込めますし、SEO 効果も期待できます。

記事へのコメント・ご質問は こちら まで
NEXT PREV