Вертикальна лінійка

Скористайтеся помічником спеціального вертикального правила, щоб створити вертикальні роздільники, як <hr>елемент.

На цій сторінці

Як це працює

Вертикальні лінії натхненні <hr>елементом, що дозволяє створювати вертикальні розділювачі в звичайних макетах. Вони оформлені так само, як <hr>елементи:

Вони 1pxширокі
Вони min-heightмають1em
Їх колір задається через currentColorіopacity

За потреби налаштуйте їх за допомогою додаткових стилів.

приклад

html

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

Вертикальні правила масштабують свою висоту у гнучких макетах:

html

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

Зі стеками

Їх також можна використовувати в стопках :

Перший пункт

Другий пункт

Пункт третій

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>