縦仕切り線（Vertical rule） v5.1.0新設
カスタム縦仕切り線ヘルパーを使用して、<hr> 要素のような垂直仕切りを作成。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.1.0新設
使い方（how it works）
縦仕切り線は <hr> 要素に着想を得ており、一般的なレイアウトで垂直方向の仕切りが作成できる。<hr> 要素と同じようなスタイルが設定されている。
- 線の幅は
1px min-heightは1em- 色は
currentcolorとopacityを経由して設定される
必要に応じて、スタイルを追加してカスタマイズする。
実例（Example）
1.基本の設定
見本
設定例
<div class="vr"></div>2.高さの調整
縦仕切り線の高さは、flexレイアウトで調整（.vr のデフォルトは display: inline-block）。
見本
設定例
<div class="d-flex" style="height: 200px;">
<div class="vr"></div>
</div>3.太さの調整
px-*ユーティリティクラスを使用すれば、より太めの仕切り線も作成できる。
見本
.vr.px-1（左右のpadding0.25remずつ）
.vr.px-2（左右のpadding0.5remずつ）
.vr.px-3（左右のpadding1remずつ）
.vr.px-4（左右のpadding1.5remずつ）
.vr.px-5（左右のpadding3remずつ）
width を設定（5pxの場合）
デフォルト（参考）
設定例
.px-*を使用<div class="vr px-1"></div>
widthを設定<div class="vr" style="width: 5px;"></div>
【設定】
- 仕切りを入れたい部分に
div.vrを入れる - 高さを調整したい場合は、
heightを設定（場合によっては.d-flexで囲む） - 太さを調整したい場合は、
.vrに.px-{size}を追加するか、widthを設定（デフォルトは1px） - 横仕切り線については、Rebootの横仕切り線に記載
積み重ねヘルパーで使用（With stacks）
積み重ねヘルパーの使用でもできる。
見本 見やすいよう色と枠を付けています
1番目のアイテム
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>CSS v5.2.0Sassから名称変更
Sass変数（Sass variables） v5.3.1変数変更
縦仕切り線の幅を変更するためにSass変数をカスタマイズ。
デフォルトの設定
scss/_variables.scss 内 vr-variables の設定$vr-border-width: var(--#{$prefix}border-width);