bootstrap-utilities

Bootstrap 5.3 ユーティリティ

Bootstrap には、カスタム CSS を使わずにすばやくスタイルを設定できる、豊富なユーティリティクラスが用意されています。これらは Utilities API を通じて生成され、カスタマイズできます。

余白ユーティリティ

マージン（m-）とパディング（p-）

<div class="m-3">Margin 1rem all sides</div>
<div class="p-3">Padding 1rem all sides</div>


<div class="mt-3">Margin top</div>
<div class="mb-3">Margin bottom</div>
<div class="ms-3">Margin start (left in LTR)</div>
<div class="me-3">Margin end (right in LTR)</div>
<div class="mx-3">Margin horizontal (left + right)</div>
<div class="my-3">Margin vertical (top + bottom)</div>


<div class="px-3 py-2">Horizontal padding 1rem, vertical 0.5rem</div>

余白のスケール

クラス	サイズ
{m|p}-0	0
{m|p}-1	0.25rem (4px)
{m|p}-2	0.5rem (8px)
{m|p}-3	1rem (16px)
{m|p}-4	1.5rem (24px)
{m|p}-5	3rem (48px)
{m|p}-auto	auto（マージンのみ）

レスポンシブな余白

<div class="mt-0 mt-md-3 mt-lg-5">
  No margin, 1rem on md, 3rem on lg+
</div>

ギャップユーティリティ（Flexbox/Grid）

<div class="d-flex gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="d-grid gap-2">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
</div>


<div class="d-grid gap-0 row-gap-3 column-gap-3">...</div>

表示ユーティリティ

<div class="d-none">Hidden</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline-block</div>
<div class="d-block">Block</div>
<div class="d-flex">Flexbox</div>
<div class="d-inline-flex">Inline flex</div>
<div class="d-grid">Grid</div>
<div class="d-table">Table</div>
<div class="d-table-row">Table row</div>
<div class="d-table-cell">Table cell</div>


<div class="d-none d-md-block">Hidden on xs/sm, block on md+</div>
<div class="d-block d-lg-none">Visible until lg</div>


<div class="d-print-none">Hidden in print</div>
<div class="d-none d-print-block">Only visible in print</div>

テキストユーティリティ

配置

<p class="text-start">Left aligned (start)</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned (end)</p>


<p class="text-start text-md-center text-lg-end">
  Left on xs/sm, center on md, right on lg+
</p>

変換

<p class="text-lowercase">lowercased text</p>
<p class="text-uppercase">UPPERCASED TEXT</p>
<p class="text-capitalize">Capitalized Text</p>

装飾

<a href="#" class="text-decoration-none">No underline</a>
<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-line-through">Strikethrough text</p>

折り返しとオーバーフロー

<div class="text-wrap">Text that wraps normally</div>
<div class="text-nowrap">Text that won't wrap</div>
<p class="text-break">Longwordthatwillbreaktopreventoverflow</p>
<p class="text-truncate" style="max-width: 150px;">
  This text is truncated with ellipsis...
</p>

フォントの太さとスタイル

<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text (relative)</p>
<p class="fw-semibold">Semibold text</p>
<p class="fw-medium">Medium text</p>
<p class="fw-normal">Normal weight</p>
<p class="fw-light">Light text</p>
<p class="fw-lighter">Lighter text (relative)</p>
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style</p>

行の高さ

<p class="lh-1">Line height 1</p>
<p class="lh-sm">Small line height</p>
<p class="lh-base">Base line height</p>
<p class="lh-lg">Large line height</p>

Flexbox ユーティリティ

方向

<div class="d-flex flex-row">Horizontal</div>
<div class="d-flex flex-row-reverse">Horizontal reversed</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex flex-column-reverse">Vertical reversed</div>

コンテンツの両端揃え

<div class="d-flex justify-content-start">Start</div>
<div class="d-flex justify-content-end">End</div>
<div class="d-flex justify-content-center">Center</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex justify-content-around">Space around</div>
<div class="d-flex justify-content-evenly">Space evenly</div>

アイテムの配置

<div class="d-flex align-items-start">Top</div>
<div class="d-flex align-items-end">Bottom</div>
<div class="d-flex align-items-center">Center</div>
<div class="d-flex align-items-baseline">Baseline</div>
<div class="d-flex align-items-stretch">Stretch</div>

個別アイテムの配置

<div class="align-self-start">Top</div>
<div class="align-self-center">Center</div>
<div class="align-self-end">Bottom</div>

Flex の折り返し

<div class="d-flex flex-wrap">Wrap</div>
<div class="d-flex flex-nowrap">No wrap</div>
<div class="d-flex flex-wrap-reverse">Wrap reverse</div>

Flex の拡大／縮小

<div class="flex-grow-0">Don't grow</div>
<div class="flex-grow-1">Grow to fill</div>
<div class="flex-shrink-0">Don't shrink</div>
<div class="flex-shrink-1">Can shrink</div>
<div class="flex-fill">Fill available space</div>

順序

<div class="order-0">First</div>
<div class="order-1">Second</div>
<div class="order-2">Third</div>
<div class="order-first">Very first (-1)</div>
<div class="order-last">Very last (6)</div>

背景ユーティリティ

<div class="bg-primary">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-success">Success</div>
<div class="bg-danger">Danger</div>
<div class="bg-warning">Warning</div>
<div class="bg-info">Info</div>
<div class="bg-light">Light</div>
<div class="bg-dark">Dark</div>
<div class="bg-body">Body</div>
<div class="bg-body-secondary">Body secondary</div>
<div class="bg-body-tertiary">Body tertiary</div>
<div class="bg-white">White</div>
<div class="bg-black">Black</div>
<div class="bg-transparent">Transparent</div>


<div class="bg-primary bg-opacity-75">75%</div>
<div class="bg-primary bg-opacity-50">50%</div>
<div class="bg-primary bg-opacity-25">25%</div>
<div class="bg-primary bg-opacity-10">10%</div>


<div class="bg-primary bg-gradient">Gradient</div>

テキストカラーのユーティリティ

<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-muted">Muted text</p>
<p class="text-body">Body text</p>
<p class="text-body-secondary">Body secondary</p>
<p class="text-body-tertiary">Body tertiary</p>
<p class="text-body-emphasis">Body emphasis</p>
<p class="text-black">Black text</p>
<p class="text-white bg-dark">White text</p>


<p class="text-primary text-opacity-75">75% opacity</p>
<p class="text-primary text-opacity-50">50% opacity</p>
<p class="text-primary text-opacity-25">25% opacity</p>

ボーダーユーティリティ

<div class="border">All sides</div>
<div class="border-top">Top</div>
<div class="border-end">End</div>
<div class="border-bottom">Bottom</div>
<div class="border-start">Start</div>


<div class="border-0">No border</div>
<div class="border-top-0">No top border</div>


<div class="border border-primary">Primary</div>
<div class="border border-success">Success</div>
<div class="border border-danger">Danger</div>


<div class="border border-1">1px</div>
<div class="border border-2">2px</div>
<div class="border border-3">3px</div>
<div class="border border-4">4px</div>
<div class="border border-5">5px</div>


<div class="rounded">Rounded</div>
<div class="rounded-0">No radius</div>
<div class="rounded-1">Small radius</div>
<div class="rounded-2">Default radius</div>
<div class="rounded-3">Large radius</div>
<div class="rounded-4">XL radius</div>
<div class="rounded-5">XXL radius</div>
<div class="rounded-circle">Circle</div>
<div class="rounded-pill">Pill</div>
<div class="rounded-top">Top only</div>
<div class="rounded-end">End only</div>
<div class="rounded-bottom">Bottom only</div>
<div class="rounded-start">Start only</div>

シャドウユーティリティ

<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>

サイズユーティリティ

幅

<div class="w-25">25% width</div>
<div class="w-50">50% width</div>
<div class="w-75">75% width</div>
<div class="w-100">100% width</div>
<div class="w-auto">Auto width</div>
<div class="mw-100">Max-width 100%</div>
<div class="vw-100">100vw</div>
<div class="min-vw-100">Min 100vw</div>

高さ

<div class="h-25">25% height</div>
<div class="h-50">50% height</div>
<div class="h-75">75% height</div>
<div class="h-100">100% height</div>
<div class="h-auto">Auto height</div>
<div class="mh-100">Max-height 100%</div>
<div class="vh-100">100vh</div>
<div class="min-vh-100">Min 100vh</div>

位置ユーティリティ

位置の値

<div class="position-static">Static (default)</div>
<div class="position-relative">Relative</div>
<div class="position-absolute">Absolute</div>
<div class="position-fixed">Fixed</div>
<div class="position-sticky">Sticky</div>

配置

<div class="position-absolute top-0 start-0">Top left</div>
<div class="position-absolute top-0 end-0">Top right</div>
<div class="position-absolute bottom-0 start-0">Bottom left</div>
<div class="position-absolute bottom-0 end-0">Bottom right</div>
<div class="position-absolute top-50 start-50">Center (needs transform)</div>

Translate による中央揃え

<div class="position-absolute top-50 start-50 translate-middle">
  Perfectly centered
</div>


<div class="position-absolute start-50 translate-middle-x">
  Horizontally centered
</div>


<div class="position-absolute top-50 translate-middle-y">
  Vertically centered
</div>

よく使われるパターン：バッジの配置

<button class="btn btn-primary position-relative">
  Notifications
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
  </span>
</button>

オーバーフローユーティリティ

<div class="overflow-auto">Auto</div>
<div class="overflow-hidden">Hidden</div>
<div class="overflow-visible">Visible</div>
<div class="overflow-scroll">Scroll</div>

<div class="overflow-x-auto">Horizontal auto</div>
<div class="overflow-x-hidden">Horizontal hidden</div>
<div class="overflow-y-auto">Vertical auto</div>
<div class="overflow-y-hidden">Vertical hidden</div>

不透明度ユーティリティ

<div class="opacity-100">100%</div>
<div class="opacity-75">75%</div>
<div class="opacity-50">50%</div>
<div class="opacity-25">25%</div>
<div class="opacity-0">0%</div>

可視性ユーティリティ

<div class="visible">Visible</div>
<div class="invisible">Invisible (takes space)</div>

Z インデックスユーティリティ

<div class="z-n1">-1</div>
<div class="z-0">0</div>
<div class="z-1">1</div>
<div class="z-2">2</div>
<div class="z-3">3</div>

オブジェクトフィットユーティリティ

<img class="object-fit-contain" src="...">
<img class="object-fit-cover" src="...">
<img class="object-fit-fill" src="...">
<img class="object-fit-scale" src="...">
<img class="object-fit-none" src="...">

インタラクションユーティリティ

<div class="user-select-all">Select all on click</div>
<div class="user-select-auto">Default selection</div>
<div class="user-select-none">Cannot select</div>
<div class="pe-none">Pointer events none</div>
<div class="pe-auto">Pointer events auto</div>

フロートユーティリティ

フロートユーティリティを使うと、要素をコンテナの左側または右側に配置し、テキストをその周囲に回り込ませることができます。

<div class="float-start">Float start (left in LTR)</div>
<div class="float-end">Float end (right in LTR)</div>
<div class="float-none">No float</div>


<div class="float-sm-start">Float start on sm+</div>
<div class="float-md-end">Float end on md+</div>
<div class="float-lg-none">No float on lg+</div>

クラス	説明
float-start	左にフロート（LTR）
float-end	右にフロート（LTR）
float-none	フロートを解除

レスポンシブ対応：float-{breakpoint}-{start|end|none}

注：現在のレイアウトでは、通常、フロートではなく Flexbox や Grid を使用します。フロートは、画像の周囲にテキストを回り込ませる場合に引き続き便利です。

垂直揃えユーティリティ

インライン、インラインブロック、インラインテーブル、テーブルセルの各要素の垂直方向の揃え方を設定します。

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

クラス	揃え方
align-baseline	ベースライン（デフォルト）
align-top	行の上端
align-middle	行の中央
align-bottom	行の下端
align-text-top	親要素のフォントの上端
align-text-bottom	親要素のフォントの下端

注：これらはインライン／インラインブロック要素とテーブルセルに適用され、ブロック要素には適用されません。ブロック要素の垂直方向の配置には、Flexbox（align-items-*）を使用してください。

リンクユーティリティ

不透明度、下線の色、オフセット、ホバー効果を設定してリンクをスタイルします。Bootstrap 5.3 で追加されました。

<a href="#" class="link-opacity-10">10% opacity</a>
<a href="#" class="link-opacity-25">25% opacity</a>
<a href="#" class="link-opacity-50">50% opacity</a>
<a href="#" class="link-opacity-75">75% opacity</a>
<a href="#" class="link-opacity-100">100% opacity</a>


<a href="#" class="link-opacity-50-hover">50% on hover</a>


<a href="#" class="link-underline-primary">Primary underline</a>
<a href="#" class="link-underline-secondary">Secondary underline</a>
<a href="#" class="link-underline-success">Success underline</a>


<a href="#" class="link-offset-1">1 offset</a>
<a href="#" class="link-offset-2">2 offset</a>
<a href="#" class="link-offset-3">3 offset</a>


<a href="#" class="link-underline-opacity-0">No underline</a>
<a href="#" class="link-underline-opacity-25">25% underline</a>
<a href="#" class="link-underline-opacity-50">50% underline</a>


<a href="#" class="link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
  Styled link
</a>

クラス	説明
link-opacity-{10|25|50|75|100}	リンクテキストの不透明度
link-opacity-{value}-hover	ホバー時の不透明度
link-underline-{color}	下線の色
link-offset-{1|2|3}	下線までの距離
link-underline-opacity-{0|10|25|50|75|100}	下線の不透明度

Utilities API

Bootstrap のユーティリティは Sass ベースの API を通じて生成され、自由にカスタマイズできます。

API の構造

各ユーティリティは、次のキーオプションを持つマップとして定義します。

オプション	説明
property	CSS プロパティ名（必須）
values	値のリストまたはマップ（必須）
class	カスタムクラスのプレフィックス（任意）
responsive	レスポンシブバリアントを生成します（デフォルト：false）
print	印刷用バリアントを生成します（デフォルト：false）
state	:hover などの状態バリアントを生成します
css-var	ルールの代わりに CSS 変数として出力します
css-variable-name	カスタム CSS 変数名（css-var と併用）
local-vars	ローカル CSS 変数のマップ
rfs	流動的な拡大縮小を有効にします（デフォルト：false）
rtl	RTL 出力に含めます（デフォルト：true）

注：すべてのユーティリティには、デフォルトで !important が含まれます。$enable-important-utilities: false を設定すると、全体で無効にできます。

カスタムユーティリティの追加

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab grabbing not-allowed
    )
  )
);

@import "bootstrap/scss/utilities/api";

既存のユーティリティの変更

// Add responsive variants to an existing utility
$utilities: map-merge(
  $utilities,
  (
    "overflow": map-merge(
      map-get($utilities, "overflow"),
      (responsive: true)
    )
  )
);

ユーティリティの削除

// Remove entirely
$utilities: map-remove($utilities, "float");

// Or set to null
$utilities: map-merge($utilities, ("float": null));

よく使われるパターン

実際のシナリオで頻繁に使用されるユーティリティの組み合わせです。

中央揃えのコンテナー（ビューポート全体）

<div class="d-flex justify-content-center align-items-center min-vh-100">
  <div class="text-center">
    <h1>Perfectly Centered</h1>
    <p>Both horizontally and vertically</p>
  </div>
</div>

スティッキーフッターのレイアウト

<div class="d-flex flex-column min-vh-100">
  <header class="bg-dark text-white p-3">Header</header>
  <main class="flex-grow-1 p-3">Main content</main>
  <footer class="bg-body-secondary p-3">Footer stays at bottom</footer>
</div>

余白とシャドウを設定したカード

<div class="card shadow-sm border-0 rounded-3">
  <div class="card-body p-4">
    <h5 class="card-title mb-3">Title</h5>
    <p class="card-text text-muted mb-0">Content</p>
  </div>
</div>

レスポンシブな表示／非表示

<div class="d-none d-md-block">Desktop only</div>


<div class="d-block d-md-none">Mobile only</div>

アイコンとテキストの配置

<div class="d-flex align-items-center gap-2">
  <svg>...</svg>
  <span>Text aligned with icon</span>
</div>

ユーティリティとカスタム CSS の使い分け

シナリオ	推奨される方法
1 回限りの余白調整	ユーティリティクラス（mt-3、p-4）
一貫性のあるコンポーネントのスタイル設定	カスタムコンポーネントクラス
レスポンシブな表示／非表示	表示ユーティリティ（d-none d-md-block）
複雑なホバー／フォーカス状態	カスタム CSS
Bootstrap のスケールにない値	Utilities API またはカスタム CSS で拡張
繰り返し使うパターン（3 回以上）	カスタムクラスとして切り出す
手早いプロトタイプ作成	速度を優先してユーティリティを使用
本番用コンポーネント	繰り返し使うユーティリティの切り出しを検討

目安：複数の要素に同じ 4 つ以上のユーティリティを組み合わせて適用する場合は、カスタムクラスの作成を検討してください。

参考資料

リファレンスファイル

• references/utilities-reference.md - ユーティリティクラスの完全なリファレンス
• references/api-customization.md - Sass の高度なカスタマイズ例

サンプルファイル

• examples/card-layout.html - 余白、シャドウ、境界線を使ったカードのスタイル設定
• examples/responsive-utilities.html - レスポンシブな表示と余白のパターン
• examples/flex-centering.html - Flexbox による中央揃えのテクニック