Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningCascading cards
Our Split screen intro section is ready and we can move on to the next step. This time we will create the "My projects" section and add special, cascading cards to it.
Step 1 - add an empty "My projects" section
Inside the <main> section and inside the element with the container class, add an empty "My projects" section:
<!--Main layout-->
<main>
<div class="container">
<!-- Section: My projects -->
<section class="mb-10 text-center">
<h2 class="fw-bold mb-7 text-center">My projects</h2>
</section>
<!-- Section: My projects -->
</div>
</main>
<!--Main layout-->
Step 2 - add grid with 3 columns
Add a grid with 3 columns inside. Nothing new to explain, we've done this many times before:
<!-- Section: My projects -->
<section class="mb-10 text-center">
<h2 class="fw-bold mb-7 text-center">My projects</h2>
<div class="row gx-lg-5">
<!-- First column -->
<div class="col-lg-4 col-md-12 mb-6 mb-lg-0">
</div>
<!-- First column -->
<!-- Second column -->
<div class="col-lg-4 mb-6 mb-lg-0">
</div>
<!-- Second column -->
<!-- Third column -->
<div class="col-lg-4 mb-6 mb-lg-0">
</div>
<!-- Third column -->
</div>
</section>
<!-- Section: My projects -->
Step 3 - add a card to each column
From the cards documentation page, copy HTML code of the Image with ripple sample code and insert it into each column.
<!-- Section: My projects -->
<section class="mb-10 text-center">
<h2 class="fw-bold mb-7 text-center">My projects</h2>
<div class="row gx-lg-5">
<!-- First column -->
<div class="col-lg-4 col-md-12 mb-6 mb-lg-0">
<div class="card">
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<!-- First column -->
<!-- Second column -->
<div class="col-lg-4 mb-6 mb-lg-0">
<div class="card">
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<!-- Second column -->
<!-- Third column -->
<div class="col-lg-4 mb-6 mb-lg-0">
<div class="card">
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<!-- Third column -->
</div>
</section>
<!-- Section: My projects -->
Step 4 - customize the content of the cards
Add texts and graphics to cards according to your preferences. I added the following:
<div class="row gx-lg-5">
<!-- First column -->
<div class="col-lg-4 col-md-12 mb-6 mb-lg-0">
<div class="card">
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/small/148.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">AI engine</h5>
<p class="text-muted">
<small>Finished <u>13.09.2021</u> for
<a href="" class="text-dark">Techify</a></small>
</p>
<p class="card-text">
Ut pretium ultricies dignissim. Sed sit amet mi eget urna
placerat vulputate. Ut vulputate est non quam dignissim
elementum. Donec a ullamcorper diam.
</p>
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>
</div>
</div>
</div>
<!-- First column -->
<!-- Second column -->
<div class="col-lg-4 mb-6 mb-lg-0">
<div class="card">
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/small/38.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Balanced design</h5>
<p class="text-muted">
<small>Finished <u>12.01.2022</u> for
<a href="" class="text-dark">Rubicon</a></small>
</p>
<p class="card-text">
Suspendisse in volutpat massa. Nulla facilisi. Sed aliquet
diam orci, nec ornare metus semper sed. Integer volutpat
ornare erat sit amet rutrum. Ut vulputate est non quam.
</p>
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>
</div>
</div>
</div>
<!-- Second column -->
<!-- Third column -->
<div class="col-lg-4 mb-6 mb-lg-0">
<div class="card">
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/small/55.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Metaverse 2.0</h5>
<p class="text-muted">
<small>Finished <u>10.11.2022</u> for
<a href="" class="text-dark">Venom Tech</a></small>
</p>
<p class="card-text">
Curabitur tristique, mi a mollis sagittis, metus felis mattis
arcu, non vehicula nisl dui quis diam. Mauris ut risus eget
massa volutpat feugiat. Donec.
</p>
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>
</div>
</div>
</div>
<!-- Third column -->
</div>
Step 5 - add a margin to the image
To create the impression of cascading, we must first list the layers in the cards.
Let's add the mx-3 class to the bg-image element to add some margin on the sides.
<div class="card">
<div class="bg-image hover-overlay mx-3" data-mdb-ripple-init data-mdb-ripple-color="light">
[...]
Step 6 - add shadows and roundings
To give the impression of an independent, cascading layer, the image should have its own shadow and roundings. We can achieve this by adding the shadow-4-strong and rounded-6 classes to the element with the bg-image class.
<div class="card">
<div class="bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init data-mdb-ripple-color="light">
[...]
Step 7 - add a negative margin
And now the most important detail - let's add a negative top margin to the element with the bg-image class to make it even more cascading.
To add a negative margin in Bootstrap, we use standard spacing classes, such as mt-3, only we need to add the letter "n". So to convert the standard mt-3 top margin to a negative one, we need to use the mt-n3 class:
<div class="card">
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init data-mdb-ripple-color="light">
[...]
Step 8 - align card heights and rounding
Currently, our cards have less rounding than the image in the middle. Let's make it consistent and add the same rounding to the cards as in the pictures.
In addition, let's add the h-100 class to the cards so that they are always the same height regardless of the amount of content in the cards.
<div class="card rounded-6 h-100">
[...]
And that's it. Our cascading cards are ready.
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.