Bootstrap 4 card image left responsive

If you are starting fresh, you can use the official Bootstrap Horizontal card. It gives you a card with an image on the left side for larger screens. If you already have the basic card, you can get the image on left using some CSS. Follow these steps for a responsive Bootstrap 4 card with an image on the left.

Final output:

Bootstrap 4 card image left demo image
Card Title

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

Go somewhere

On smaller screens:

Bootstrap 4 card image left reponsive on small screens


1. This is the basic Bootstrap card. (I added an image for the output)

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

Bootstrap 4 card image left step 1
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. By default, the flex-direction of the card is set to column by Bootstrap. To get the image on the left of the card, change the flex-direction to row. Also, remove the fixed width and set the width of the image as per the content size.

.card {
  flex-direction: row;
}
.card img {
  width: 30%;
}

Output:

Bootstrap 4 card image left step 2
Card title

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

Go somewhere

Different image sizes as per content:

bootstrap 4 card image left responsive different image sizes

3. Since the display type of the card component is flex, to get the content in card center-aligned vertically, set align-items to center. The border-radius now has to be for the top-left and bottom-left corner.

.card {
  align-items: center;
}
.card-title {
  font-weight: bold;
}
.card img {
  border-top-right-radius: 0;
  border-bottom-left-radius: calc(0.25rem - 1px);
}

Output:

Bootstrap 4 card image left step 3
Card title

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

Go somewhere

4. As per your text content and image size, it might not look as good on smaller screens. For this example, I thought of dropping the button on smaller screens and adjust the padding and margin accordingly.(May vary for you). I have also adjusted the image sizes for better results on various screens.

@media only screen and (max-width: 768px) {
  a {
    display: none;
  }
  .card-body {
    padding: 0.5em 1.2em;
  }
  .card-body .card-text {
    margin: 0;
  }
  .card img {
    width: 50%;
  }
}
@media only screen and (max-width: 1200px) {
  .card img {
    width: 40%;
  }
}

Output:

Bootstrap 4 card image left step 4
Card title

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

Go somewhere


Final Output Code for Responsive Bootstrap 4 card image left:

HTML

<div class="card">
  <img src="https://codingyaar.com/wp-content/uploads/bootstrap-4-card-image-left-demo-image.jpg" class="card-img-top" />
  <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>

CSS

.card {
  flex-direction: row;
  align-items: center;
}
.card-title {
  font-weight: bold;
}
.card img {
  width: 30%;
  border-top-right-radius: 0;
  border-bottom-left-radius: calc(0.25rem - 1px);
}
@media only screen and (max-width: 768px) {
  a {
    display: none;
  }
  .card-body {
    padding: 0.5em 1.2em;
  }
  .card-body .card-text {
    margin: 0;
  }
  .card img {
    width: 50%;
  }
}
@media only screen and (max-width: 1200px) {
  .card img {
    width: 40%;
  }
}

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *