Bootstrap card design

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

Final Output:

image for bootstrap card design example
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:

image for bootstrap card design example
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:

image for bootstrap card design example
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:

image for bootstrap card design example
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;
}

Video explanation for Bootstrap card design example:

Recently added:

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x