bootstrap-helpers

Bootstrap 5.3 ヘルパー

Bootstrap には、基本のユーティリティクラスを拡張する、よく使われるユーティリティパターン向けのヘルパークラスが用意されています。

Clearfix

コンテナー内のフロートを解除します：

<div class="clearfix">
  <button class="btn btn-secondary float-start">Left float</button>
  <button class="btn btn-secondary float-end">Right float</button>
</div>

色と背景

適切なコントラストを実現する、色と背景を組み合わせたヘルパーです：

<div class="text-bg-primary p-3">Primary with proper contrast</div>
<div class="text-bg-secondary p-3">Secondary</div>
<div class="text-bg-success p-3">Success</div>
<div class="text-bg-danger p-3">Danger</div>
<div class="text-bg-warning p-3">Warning</div>
<div class="text-bg-info p-3">Info</div>
<div class="text-bg-light p-3">Light</div>
<div class="text-bg-dark p-3">Dark</div>

これにより、テキストの色のコントラストが自動的に適切な状態になります。

色付きリンク

ホバー状態を含むリンクの色です：

<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>
<a href="#" class="link-body-emphasis">Body emphasis link</a>


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



<a href="#" class="link-underline link-underline-opacity-50">Base underline with 50% opacity</a>
<a href="#" class="link-underline-primary link-underline-opacity-25">Primary underline at 25%</a>


<a href="#" class="link-primary link-underline link-underline-opacity-0">No underline</a>
<a href="#" class="link-primary link-underline link-underline-opacity-10">Light underline</a>


<a href="#" class="link-primary link-offset-2">Offset underline</a>
<a href="#" class="link-primary link-offset-3">More offset</a>

ホバーのバリエーション

リンクユーティリティには、動的な効果を実現するホバーのバリエーションが含まれています：

<a href="#" class="link-primary link-opacity-50 link-opacity-100-hover">Brightens on hover</a>


<a href="#" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover">Underline on hover</a>


<a href="#" class="link-primary link-offset-2 link-offset-3-hover">Offset increases on hover</a>


<a href="#" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
  Underline appears on hover
</a>

フォーカスリング

カスタムのフォーカスリングスタイルです：

<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
  Custom focus ring
</a>


<a href="#" class="d-inline-flex focus-ring focus-ring-primary">Primary</a>
<a href="#" class="d-inline-flex focus-ring focus-ring-secondary">Secondary</a>
<a href="#" class="d-inline-flex focus-ring focus-ring-success">Success</a>
<a href="#" class="d-inline-flex focus-ring focus-ring-danger">Danger</a>


<a href="#" class="d-inline-flex focus-ring" style="--bs-focus-ring-color: rgba(118, 169, 250, .5)">
  Custom color
</a>

アイコンリンク

アイコンを含むリンクのスタイルです：

<a class="icon-link" href="#">
  <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
  Icon link
</a>

<a class="icon-link" href="#">
  Icon link
  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>


<a class="icon-link icon-link-hover" href="#">
  Icon link
  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>


<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
  <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
  Icon link
</a>

位置

よく使われるパターン向けの位置指定ヘルパーです：

固定位置

<div class="fixed-top">Fixed to top</div>
<div class="fixed-bottom">Fixed to bottom</div>

スティッキー位置

<div class="sticky-top">Sticky top</div>
<div class="sticky-sm-top">Sticky top on sm+</div>
<div class="sticky-md-top">Sticky top on md+</div>
<div class="sticky-lg-top">Sticky top on lg+</div>
<div class="sticky-xl-top">Sticky top on xl+</div>
<div class="sticky-xxl-top">Sticky top on xxl+</div>

<div class="sticky-bottom">Sticky bottom</div>
<div class="sticky-sm-bottom">Sticky bottom on sm+</div>
<div class="sticky-md-bottom">Sticky bottom on md+</div>
<div class="sticky-lg-bottom">Sticky bottom on lg+</div>
<div class="sticky-xl-bottom">Sticky bottom on xl+</div>
<div class="sticky-xxl-bottom">Sticky bottom on xxl+</div>

比率

埋め込みコンテンツや動画のアスペクト比を維持します：

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/..." title="YouTube video"></iframe>
</div>


<div class="ratio ratio-21x9">
  <iframe src="..."></iframe>
</div>


<div class="ratio ratio-4x3">
  <iframe src="..."></iframe>
</div>


<div class="ratio ratio-1x1">
  <iframe src="..."></iframe>
</div>


<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <iframe src="..."></iframe>
</div>

スタック

すばやく作成できるフレックスボックスレイアウトです：

垂直スタック（vstack）

<div class="vstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2">Second item</div>
  <div class="p-2">Third item</div>
</div>


<div class="vstack gap-2">
  <button class="btn btn-secondary">Top</button>
  <button class="btn btn-secondary mt-auto">Bottom</button>
</div>

水平スタック（hstack）

<div class="hstack gap-3">
  <div class="p-2">First</div>
  <div class="p-2">Second</div>
  <div class="p-2">Third</div>
</div>


<div class="hstack gap-3">
  <button class="btn btn-secondary">Left</button>
  <div class="vr"></div>  
  <button class="btn btn-secondary ms-auto">Right</button>
</div>


<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

ブラウザーサポートに関する注意： フレックスボックスでのギャップユーティリティ（.gap-*）は、Safari 14.5 より前のバージョンでは完全にはサポートされていません。グリッドレイアウトには影響しません。より幅広いブラウザーをサポートするには、代わりにマージンユーティリティの使用を検討してください。

ストレッチリンク

コンテナー全体をクリック可能にします：

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some text that will appear.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>


<div class="row g-0 bg-body-secondary position-relative">
  <div class="col-md-6">
    <img src="..." class="w-100" alt="...">
  </div>
  <div class="col-md-6 p-4">
    <h5>Columns with stretched link</h5>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

注意： 親要素には position: relative を指定する必要があります（カードにはデフォルトで指定されています）。

包含ブロックの特定： ストレッチリンクが期待どおりに機能しない場合は、包含ブロックも作成する以下の CSS プロパティが親要素に指定されていないか確認してください：transform、perspective、filter（Firefox のみ）、または transform か perspective が設定された will-change。

テキストの省略

長いテキストを省略記号で切り詰めます：

<div class="text-truncate" style="max-width: 150px;">
  This text is too long and will be truncated with an ellipsis.
</div>


<span class="d-inline-block text-truncate" style="max-width: 150px;">
  This text is truncated.
</span>

垂直ルール

垂直方向の区切り線です：

<div class="vr"></div>


<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>


<div class="hstack gap-3">
  <div>Item 1</div>
  <div class="vr"></div>
  <div>Item 2</div>
  <div class="vr"></div>
  <div>Item 3</div>
</div>

視覚的に非表示

コンテンツを視覚的には非表示にしながら、スクリーンリーダーからはアクセス可能な状態にします：

<h2 class="visually-hidden">Title for screen readers</h2>


<a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>

使用例：

• ナビゲーションをスキップするリンク
• 視覚的な文脈だけで十分な場合のフォームラベル
• アイコンや画像に関する追加情報
• ドキュメント構造を示す見出し

カスタムクラスに使用できる Sass ミックスイン：

@import "bootstrap/scss/mixins/visually-hidden";

.custom-sr-only {
  @include visually-hidden;
}

Sass のカスタマイズ

多くのヘルパーは、Sass 変数を使ってビルド時にカスタマイズできます：

• フォーカスリング：$focus-ring-width、$focus-ring-opacity、$focus-ring-blur
• アイコンリンク：$icon-link-gap、$icon-link-icon-size、$icon-link-icon-transform
• 比率：カスタムアスペクト比を指定する $aspect-ratios マップ

関連リソース

リファレンスファイル

• references/helpers-reference.md - ヘルパークラスの完全なリファレンスと Sass のカスタマイズオプション

サンプルファイル

• examples/accessibility-patterns.html - 視覚的に非表示にする方法、フォーカスリング、スキップリンク、スクリーンリーダー向けユーティリティ
• examples/link-helpers-patterns.html - 色付きリンク、アイコンリンク、ストレッチリンク、リンクユーティリティ
• examples/position-layout-patterns.html - 固定位置とスティッキー位置のパターン
• examples/ratio-embed-patterns.html - レスポンシブな動画の埋め込みとアスペクト比ユーティリティ
• examples/stack-patterns.html - ギャップのバリエーションを含む、vstack/hstack の包括的なパターン