Bootstrap card design

Here’s a simple Bootstrap 5 card design example with the card body overlapping the image.

Final Output:

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

1. Add your Bootstrap card.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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">Go somewhere</a>
  </div>
</div>

Output:

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

2. Set the background and font color for the card body.

.card-body {
  background-color: hotpink;
  color: #fff;
}

Reduce the card body width. Set image position to relative and card-body position to absolute.

Adjust the top and left to position the card body over the image.

.card-img-top {
  position: relative;
}
.card-body {
  width: 95%;
  position: absolute;
  top: 75%;
  left: 2.5%;
}

Add some bottom margin to the card to avoid overlapping on other elements.

.card {
  margin-bottom: 5em;
}

Output:

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

3. Add a box shadow to the card body. Set the border radius for the image to 0. Set card border to none.

.card-body {
  box-shadow: 0 0 10px 0 plum;
}
.card-img-top {
  border-radius: 0;
}
.card {
  border: none;
}

Output:

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Final Output Code for Bootstrap card design example:

HTML:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="image for bootstrap card design example">
  <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>
  </div>
</div>

CSS:

.card {
  border: none;
  margin-bottom: 5em;
}

.card-body {
  background-color: hotpink;
  color: #fff;
  width: 95%;
  position: absolute;
  top: 75%;
  left: 2.5%;
  box-shadow: 0 0 10px 0 plum;
}

.card-img-top {
  border-radius: 0;
  position: relative;
}