Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

Dividers

Dividers are small but very useful elements when creating a UI. In this lesson we will learn how they work in MDB and how to create horizontal, vertical and blurry dividers.

At first glance, dividers may seem like insignificant details to you, but it is precisely such details that create the "something" in good design.

Default divider

We create the default divider using the <hr> element:

<hr>

As you can see, the default version is a 1px thick line with a strong grey color.

As you remember from previous lessons, Material Minimal prefers more subtle elements. So instead of dark gray, 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.

We are applying this styles by adding hr class to <hr> element:

<hr class="hr">
Vertical divider

We can easily create a vertical divider using the vr class. However, we must remember to define its height using inline CSS:

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

Text

Text

Blurry divider

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

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

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

Text

Text

Using blurry dividers, you can create attractive compositions, such as the one below:

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>

All right. Armed with new knowledge, let's get back to work on our portfolio!

Step 1 - add blurry dividers to each of the testimonial card

This will be a super simple step - add a blurry divider at the top of each tab. It will be there for decorative purposes only.

<div>
  <div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">

    <!-- Divider here -->
    <hr class="hr hr-blurry">

    <p class="text-muted mt-4 mb-2">Project Manager at Spotify</p>
    <p class="h5 mb-4 text-primary">Garry Lindman</p>
    <p class="pb-4 mb-4">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis molestias quidem
      itaque earum tempora distinctio soluta ut, eius, impedit porro iure praesentium
      ratione possimus quos suscipit, ratione nostrum cum odit.
    </p>
  </div>
  <img src="https://mdbootstrap.com/img/new/avatars/22.jpg" class="w-100 rounded-7 mt-n5 shadow-5-strong"
    style="max-width: 100px" alt="Avatar" />
</div>

Project Manager at Spotify

Garry Lindman

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis molestias quidem itaque earum tempora distinctio soluta ut, eius, impedit porro iure praesentium ratione possimus quos suscipit, ratione nostrum cum odit.

Avatar
Demo and source code for this lesson
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.