Vertical rule

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:

Edit in sandbox 
        
            
            <div class="vr"></div>

Vertical rules scale their height in flex layouts:

Edit in sandbox 
        
            
            <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
Edit in sandbox 
        
            
            <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

Edit in sandbox 
        
            
          <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
Edit in sandbox 
        
            
          <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>