Dividers

Bootstrap 5 Dividers

Divider lines for Bootstrap 5 layouts. Examples of horizontal divider lines (hr) as well as vertical divider lines for clearer organization of your content.

Basic example

Edit in sandbox 
        
            
        <hr class="hr" />

Basic vertical

Text

Text

Edit in sandbox 
        
            
        <div class="vr" style="height: 250px;"></div>

Blurry horizontal

Edit in sandbox 
        
            
        <hr class="hr hr-blurry" />

Blurry vertical

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>