Dividers

Angular Bootstrap 5 Dividers

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

Basic example

<hr class="hr" />

Basic vertical

Text

Text

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

Blurry horizontal

<hr class="hr hr-blurry" />

Blurry vertical

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>