• クリアフィックス(Clearfix)
• カラーリンク(Colored links)
• 比率(Ratios)
  • カスタム比率(Custom ratio)
• ポジション(Position)
• スタック(Stacks)
• 隠し要素(Visually hidden)
• ストレッチリンク(Stretched link)
• テキストトランケーション(Text truncation)
• 垂直罫線(Vertical rule)

.clearfix は、float によるテキストの回り込み制御をキャンセルします。

<div class="clearfix">
  <div style="width:3rem; height:3rem; border:1px solid gray" class="float-start me-2">One</div>
  <div style="width:3rem; height:3rem; border:1px solid gray" class="float-start">Two</div>
</div>
<p>あああああ</p>

.link-{context} は、リンクに対して　primary, secondary, success, danger などのコンテキストに応じた色を設定します。

<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 bg-secondary px-1">Light link</a>
<a href="#" class="link-dark">Dark link</a>

.ratio, .ratio-{x}x{y} は、画像や動画などのコンテンツの横幅と高さの割合を一定に保ちます。割合は 1x1, 4x3, 16x9, 21x9 の中から選びます。

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

--bs-aspect-ratio: を指定することで、比率をカスタマイズすることもできます。

<div class="ratio my-box" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

.fixed-top は常にページの最上部に配置されるコンテンツを、.fixed-bottom は常にページの最下部に配置されるコンテンツを、.sticky-top はページがスクロールして上側に隠れそうになったら上部に固定されるコンテンツを表示します。

<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>

.vstack は垂直方向、.hstack は水平方向に子要素を並べます。.gap-{n} は要素間の隙間を指定します。.me-auto, .ms-auto で開始方向(左方向)、終了方向(右方向)に可能な限りの隙間を空けることもできます。

<div class="vstack gap-2 mb-2">
  <div class="bg-light border">First</div>
  <div class="bg-light border">Second</div>
  <div class="bg-light border">Third</div>
</div>
<div class="hstack gap-2">
  <div class="bg-light border me-auto">First</div>
  <div class="bg-light border">Second</div>
  <div class="bg-light border">Third</div>
</div>

.visually-hidden は要素を視覚的に隠します。視覚的に隠れているだけなので、タブキーによるフォーカスは与えられます。.visually-hidden-focusable を指定すると、フォーカスがあたった時だけ表示されます。

<a href="#">1</a>
<a href="#" class="visually-hidden">2</a>
<a href="#">3</a>
<a href="#" class="visually-hidden-focusable">4</a>
<a href="#">5</a>

.stretched-link は、position: relative が指定された親要素全体にストレッチされたリンクを指定します。下記の例では、カードのどの部分をクリックしても、リンク先にジャンプします。

<div class="card" style="width:10rem">
  <div class="card-body bg-light">
    <div class="h5 card-title">Card Title</div>
    <div class="card-text">Catd text ...</div>
    <div><a href="#" class="card-link stretched-link">more...</a></div>
  </div>
</div>

.text-truncate は、要素の横幅に応じて表示できないテキストを ... で省略します。

<div class="text-truncate border bg-light px-1" style="width:14rem;">
  Bootstrap is the world's most popular front-end open source toolkit.
</div>

.vr は垂直な罫線を表示します。

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