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:
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:
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.
Step 4 - customize the content of the cards
Add texts and graphics to cards according to your preferences. I added the following:

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.
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.
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:
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.
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.