Вертикално правило

Използвайте персонализирания помощник за вертикално правило, за да създадете вертикални разделители като <hr>елемента.

На тази страница

Как работи

Вертикалните правила са вдъхновени от <hr>елемента, което ви позволява да създавате вертикални разделители в общи оформления. Те са стилизирани точно като <hr>елементи:

Те са 1pxшироки
Те имат min-heightот1em
Цветът им се задава чрез currentColorиopacity

Персонализирайте ги с допълнителни стилове според нуждите.

Пример

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

Вертикалните правила мащабират височината си в гъвкави оформления:

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

Със стекове

Те могат да се използват и в стекове :

Първи елемент

Втори елемент

Трети елемент

<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>