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>
他にも、3辺に線を引くクラス、線の色を指定できるクラスがあります。詳細は以下の公式ドキュメント参照。
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-
を指定することもできます。
また、次のように2種類以上のクラスを使うことで、複数のブレイクポイントを指定できます。
<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
以上です。

ブログを1カラムに変更した理由と、変更した結果(直帰率・平均ページ滞在時間)
ブログのレイアウトを2カラムから1カラムに変更しました。この記事ではレイアウトの変更理由と、その結果直帰率がどうなったかなどを紹介したいと思います。