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）
Breakpoints (ブレイクポイント) · Bootstrap v5.0
テキスト
左右配置（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 |
m-sm-1、m-md-2のように、ブレイクポイントの infix を指定してレスポンシブにすることができます。
<div class="m-2 m-lg-4">スマホで margin 0.5rem、画面幅992px以上で margin 1.5rem</div>以下に記載のクラスも、同様にレスポンシブ対応です。
上下左右のうち、一箇所だけ 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 |
Spacing(スペーシング) · Bootstrap v5.0
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 |
p-sm-1、p-md-2のように、ブレイクポイントの infix を指定してレスポンシブにすることができます。
<div class="p-2 p-sm-3">スマホで padding 0.5rem、画面幅576px以上で padding 1rem</div>以下に記載のクラスも、同様にレスポンシブ対応です。
上下左右のうち、一箇所だけ 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 |
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）
| クラス名 | 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-を指定することもできます。
また、次のように２種類以上のクラスを使うことで、複数のブレイクポイントを指定できます。
<div class="d-none d-sm-block">スマホで非表示、画面幅576px以上でブロック要素</div>
<div class="d-block d-sm-none">スマホでブロック要素、画面幅576px以上で非表示</div>
Display property (ディスプレイ) · Bootstrap v5.0
※ 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% |
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 | スクロール時に位置を固定 |
固定に関しては、以下のクラスもあります。
| クラス名 | 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>Position(ポジション) · Bootstrap v5.0
その他（公式リンクのみ）
表（table）
Tables (テーブル) · Bootstrap v5.0
関連記事：Bootstrap5／tableタグがレスポンシブにならない場合の対処法
グリッドシステム・カラム
ボタン
Buttons (ボタン) · Bootstrap v5.0
以上です。
ブログを１カラムに変更した理由と、変更した結果（直帰率・平均ページ滞在時間）
ブログのレイアウトを２カラムから１カラムに変更しました。この記事ではレイアウトの変更理由と、その結果直帰率がどうなったかなどを紹介したいと思います。
