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
The default divider is 1px
thick and dark gray in color. But MDB prefers slightly more subtle elements, so by adding the hr
class to the <hr>
element we add a light gray color to the divider. However, so that the divider does not lose its visibility, we enlarge it to 2px
thick.
<hr class="hr" />
Basic vertical
We can easily create a vertical divider using the vr
class. However, we must remember to define its height using inline CSS:
Text
Text
<!-- Flexbox for demo purpose -->
<div class="d-flex">
<!-- Element on the left -->
<div class="px-4">
<p>Text</p>
</div>
<!-- Vertical divider -->
<div class="vr" style="height: 250px;"></div>
<!-- Element on the left -->
<div class="px-4">
<p>Text</p>
</div>
</div>
Blurry horizontal
By adding the hr-blurry
class, we can make the divider blur at the edges. These types of dividers are often used for decorative purposes:
<hr class="hr hr-blurry" />
Blurry vertical
It works similarly with vertical dividers - just add the vr-blurry
class:
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>