Vertical rule

Angular Bootstrap 5 Vertical rule

Add a vertical divider to your design.

How it works

Vertical rules are inspired by the <hr> element, allowing you to create vertical dividers in common layouts. They’re styled just like <hr> elements:

  • They’re 2px wide
  • They have min-height of 1em
  • Their color is set via currentColor and opacity

Customize them with additional styles as needed.

Example

Use .vr class to create vertical dividers: 

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

Vertical rules scale their height in flex layouts: 

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

With stacks

They can also be used in stacks:

First item
Second item
Third item
<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>

Blurry

Text

Text 2

<div class="vr vr-blurry" style="height: 250px;"></div>

Blurry divider practical example

Below is an example, of how these blurry dividers are presented within a section:

5000+
Components
490+
Design blocks
100+
Templates
28
Plugins
<section class="text-center">
  <div class="row">
    <div class="col-lg-3 col-md-6 mb-5 mb-md-5 mb-lg-0 position-relative">
      <i class="fas fa-cubes fa-3x text-primary mb-4"></i>
      <h5 class="text-primary fw-bold mb-3">5000+</h5>
      <h6 class="fw-normal mb-0">Components</h6>
      <div class="vr vr-blurry position-absolute my-0 h-100 d-none d-md-block top-0 end-0"></div>
    </div>

    <div class="col-lg-3 col-md-6 mb-5 mb-md-5 mb-lg-0 position-relative">
      <i class="fas fa-layer-group fa-3x text-primary mb-4"></i>
      <h5 class="text-primary fw-bold mb-3">490+</h5>
      <h6 class="fw-normal mb-0">Design blocks</h6>
      <div class="vr vr-blurry position-absolute my-0 h-100 d-none d-md-block top-0 end-0"></div>
    </div>

    <div class="col-lg-3 col-md-6 mb-5 mb-md-0 position-relative">
      <i class="fas fa-image fa-3x text-primary mb-4"></i>
      <h5 class="text-primary fw-bold mb-3">100+</h5>
      <h6 class="fw-normal mb-0">Templates</h6>
      <div class="vr vr-blurry position-absolute my-0 h-100 d-none d-md-block top-0 end-0"></div>
    </div>

    <div class="col-lg-3 col-md-6 mb-5 mb-md-0 position-relative">
      <i class="fas fa-plug fa-3x text-primary mb-4"></i>
      <h5 class="text-primary fw-bold mb-3">28</h5>
      <h6 class="fw-normal mb-0">Plugins</h6>
    </div>
  </div>
</section>