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