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）
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 | テキストやリンクの色をリセットし、親要素から継承 |
余白
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 レイアウトには詳細クラスが多く設定されています。使う場合は公式サイトを参照ください。
要素のサイズ（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
関連記事：Bootstrap5／tableタグがレスポンシブにならない場合の対処法
グリッドシステム・カラム
ボタン
Buttons (ボタン) · Bootstrap v5.0
以上です。
記事へのコメント・ご質問は こちら まで