Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningDividers
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.
About author
Michal Szymanski
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.