積み重ねヘルパー（Stacks） v5.1.0新設

積み重ねヘルパーは、Bootstrapでレイアウトをすばやく簡単に作成するために、多数のFlexboxプロパティを適用するためのショートカットを提供。コンセプトと実装のすべての功績は、オープンソースのPylonプロジェクトにある。

縦積み（Vertical）

.vstack を使用して、垂直レイアウトを作成。積み重ねられたアイテムは、デフォルトでは全幅になる。.gap-* ユーティリティを使用して、アイテム間に空白を追加。

見本 見やすいよう色と枠を付けています

設定例

<div class="vstack gap-3">
  <div class="p-2">1番目のアイテム</div>
  <div class="p-2">2番目のアイテム</div>
  <div class="p-2">3番目のアイテム</div>
</div>

横並び（Horizontal）

横並びには .hstack を使用。積み重ねられたアイテムは、デフォルトで上下中央に配置され、必要な幅だけを取る。.gap-* ユーティリティを使用して、アイテム間に空白を追加。

見本1：デフォルトの設定 見やすいよう色と枠を付けています

設定例

<div class="hstack gap-3">
  <div class="p-2">1番目のアイテム</div>
  <div class="p-2">2番目のアイテム</div>
  <div class="p-2">3番目のアイテム</div>
</div>

スペーサーとして .ms-auto などの左右マージンユーティリティを使用：

見本2：2番目・3番目のアイテムを行末揃えにする 見やすいよう色と枠を付けています

設定例

<div class="hstack gap-3">
  <div class="p-2">1番目のアイテム</div>
  <div class="p-2 ms-auto">2番目のアイテム</div>
  <div class="p-2">3番目のアイテム</div>
</div>

そして縦仕切り線を入れる：

見本3：さらに2番目と3番目のアイテムの間に仕切りを入れる 見やすいよう色と枠を付けています

設定例

<div class="hstack gap-3">
  <div class="p-2">1番目のアイテム</div>
  <div class="p-2 ms-auto">2番目のアイテム</div>
  <div class="vr"></div>
  <div class="p-2">3番目のアイテム</div>
</div>

実例（Examples）

.vstack を使用して、ボタンやその他の要素を縦積みにする。

見本1：縦積みボタン

設定例

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">変更を保存</button>
  <button type="button" class="btn btn-outline-secondary">キャンセル</button>
</div>

.hstack を使用して、横並びフォームを作成。

見本2：横並びフォーム v5.1.1設定変更

設定例 緑背景がv5.1.1での変更箇所

<div class="hstack gap-3">
  <input type="text" class="form-control me-auto" placeholder="ここにアイテムを追加..." aria-label="ここにアイテムを追加...">
  <button type="button" class="btn btn-secondary flex-shrink-0">送信</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger flex-shrink-0">リセット</button>
</div>