Free UI/UX design course

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

Start learning

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

    [...]
Balanced design

Finished 12.01.2022 for Rubicon

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.

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

    [...]
Balanced design

Finished 12.01.2022 for Rubicon

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.

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

    [...]
Balanced design

Finished 12.01.2022 for Rubicon

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.

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

    [...]
Balanced design

Finished 12.01.2022 for Rubicon

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.

Read more

And that's it. Our cascading cards are ready.

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.