Bootstrap
ユーティリティ
クラス
Bootstrapユーティリティクラス一覧
余白・テキスト・表示を即座に調整
Bootstrapのユーティリティクラスを使えば、CSSを書かずにクラス名だけで余白・色・テキスト揃え・表示/非表示などを制御できます。
よく使うユーティリティクラスをまとめて紹介します。
こんな人向けの記事です
- CSSを書かずに余白や色を調整したい
- Bootstrapのユーティリティクラスを知りたい
- よく使うクラスを一覧で確認したい
Step 1余白（Margin / Padding）
形式：{m|p}{方向}-{サイズ}
| 方向 | 意味 |
|---|
t | top |
b | bottom |
s | start（左） |
e | end（右） |
x | 左右 |
y | 上下 |
| なし | 全方向 |
| サイズ | 値 |
|---|
0 | 0 |
1 | 0.25rem（4px） |
2 | 0.5rem（8px） |
3 | 1rem（16px） |
4 | 1.5rem（24px） |
5 | 3rem（48px） |
auto | 自動（中央揃え等） |
HTML
<div class="mt-3">上にmargin 1rem</div>
<div class="mb-5">下にmargin 3rem</div>
<div class="px-4">左右にpadding 1.5rem</div>
<div class="py-2">上下にpadding 0.5rem</div>
<div class="mx-auto" style="width:200px">水平中央揃え</div>
Step 2テキスト
| クラス | 効果 |
|---|
text-start | 左揃え |
text-center | 中央揃え |
text-end | 右揃え |
fw-bold | 太字 |
fw-normal | 通常の太さ |
fw-light | 細字 |
fst-italic | 斜体 |
text-decoration-none | 下線を消す |
text-uppercase | 大文字 |
text-lowercase | 小文字 |
fs-1 〜 fs-6 | フォントサイズ（1が最大） |
text-truncate | テキストを省略（...） |
Step 3背景色と文字色
| 文字色 | 背景色 |
|---|
text-primary | bg-primary |
text-secondary | bg-secondary |
text-success | bg-success |
text-danger | bg-danger |
text-warning | bg-warning |
text-info | bg-info |
text-light | bg-light |
text-dark | bg-dark |
text-white | bg-white |
text-muted | bg-transparent |
Step 4表示と非表示
| クラス | 効果 |
|---|
d-none | 非表示 |
d-block | ブロック表示 |
d-inline | インライン表示 |
d-flex | Flexbox表示 |
d-grid | Grid表示 |
d-md-none | 768px以上で非表示 |
d-none d-md-block | スマホで非表示、タブレット以上で表示 |
d-md-none | タブレット以上で非表示 |
HTML
<!-- スマホでは非表示、PCでは表示 -->
<div class="d-none d-lg-block">PC専用コンテンツ</div>
<!-- PCでは非表示、スマホでは表示 -->
<div class="d-lg-none">スマホ専用コンテンツ</div>
Step 5サイズと配置
| クラス | 効果 |
|---|
w-25 / w-50 / w-75 / w-100 | 幅 25% / 50% / 75% / 100% |
h-100 | 高さ 100% |
mw-100 | 最大幅 100% |
position-relative | position: relative |
position-absolute | position: absolute |
position-fixed | position: fixed |
position-sticky | position: sticky |
overflow-hidden | overflow: hidden |
rounded | 角丸 |
rounded-circle | 円形 |
shadow | 影 |
shadow-sm | 小さい影 |
まとめ
m-* / p-* で余白を0〜5段階で調整text-center / fw-bold 等でテキストを制御text-* / bg-* で色を指定d-none / d-*-block でレスポンシブな表示切替w-* / rounded / shadow でサイズと見た目を調整