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.

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

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

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

Blurry vertical

It works similarly with vertical dividers - just add the vr-blurry class:

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>