The Ultimate React-Bootstrap Card Image Tutorial (3 Examples!)

The React Bootstrap Card is a great component for showing images and text in an organized way. In this tutorial we will create an image card that positions the image responsively and at a custom size.

Here’s one of the cards we will build:

Full code for this demo is in the first section.

React Bootstrap Card Image Left

The first card we will build is a card with the image aligned to the left of the card body. Inside of the Card wrapper, we have two components, the Card.Img and the Card.Body. The default styling of the card is display: flex; with flex-direction: column;.

import Card from 'react-bootstrap/Card';
import Button from "react-bootstrap/Button";
import "./CustomCardImage.scss";

export default function CustomCardImage() {
  return (
    <Card>
      <Card.Img src="https://picsum.photos/200/300" />
      <Card.Body>
        <Card.Title>Title Text</Card.Title>
        <Card.Text>
          Here's some fillllllller text
        </Card.Text>
        <div className="d-flex justify-content-between">
          <Button className="ms-3">Add</Button>
          <Button className="me-3">Remove</Button>
        </div>
      </Card.Body>
    </Card>
  );
}

The code above renders the card below. Notice the flex direction of the wrapping div with class card

We can change the flex direction to row and then the image will be aligned to the left of the card body. The easiest way to do this is add className: flex-row. This uses built-in Bootstrap utility classes, which is good to do. However, this adds !important to the flex direction, and later we will want to make the direction responsive.

Instead of using a class, I’ll add flex-direction: row to the card class in my .scss file:

.card {
  flex-direction: row;
}

Now the image card component will be aligned to the left of the card body. In all of the customizations in this tutorial, our JSX will stay the same and we will only change the CSS.

Try adding a hover styling to your card for some great effects.

React Bootstrap Responsive Card Image

React Bootstrap Img.Card has a variant prop with two possible values: top (the default) and bottom. If we want a card with a left image on wide screens and a top image on smaller screens, we have to handle the layout ourselves. Furthermore, the variants aren’t directly controlling the alignment, which we will discuss later.

In the section above, I showed how to make the card have a left aligned image. In order to swap between a left aligned and top aligned image dynamically, we add a media query that changes the flex direction:

@include media-breakpoint-down(md) {
  .card {
    flex-direction: column;
  }
}

As I mentioned above, the Card.Img variants are not actually changing the alignment of the image. Instead, they are providing styling such as rounding borders. The “REact-Bootstrap way” of controlling alignment is by changing the order of the elements in the JSX.

If you don’t want to change your JSX just to have the image on bottom, try this code instead for a responsive bottom image alignment:

@include media-breakpoint-down(md) {
  .card {
    flex-direction: column-reverse;
  }
}

Card images can be right aligned compared to the card body with this code:

.card {
  flex-direction: row-reverse;
}

Check out this demo of different responsive React-Bootstrap Navbar styling.

React Bootstrap Card Image Size

In all of these examples I have been modifying the image size based on its position. Here’s the code:

.card-img {
  max-width: 200px;
  max-height: 240px;
}

@include media-breakpoint-down(md) {
  .card-img {
    max-width: 100%;
    max-height: 200px;
  }
}

Notice that I have targeted the card-img class that exists on the Card.Img component by default. This is a built-in Bootstrap class. I could also have added a custom class to the component.

Notice that I have another media breakpoint for the image size. On both breakpoints in this tutorial I used media-breakpoint-down(md). This means that the styling only takes effect on screen sizes smaller than the md screen (768px).

One note: I am using lorem picsum to pull an image and the image isn’t very well sized. In a “production” app, I would ensure my assets were a better size for my app.

Check out this tutorial on card borders, background color, and text styling.