Reactstrap — Card Customizations

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to customize cards with Reactstrap.

Header and Footer

We can add headers and booters to cards.

For example, we can write:

import React from "react";
import {
  Card,
  Button,
  CardHeader,
  CardFooter,
  CardBody,
  CardTitle,
  CardText
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Card>
        <CardHeader>Header</CardHeader>
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardFooter>Footer</CardFooter>
      </Card>

      <Card>
        <CardHeader tag="h3">Featured</CardHeader>
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardFooter className="text-muted">Footer</CardFooter>
      </Card>
    </div>
  );
}

We have the CardHeader and CardFooter components to display the header and footer.

Image Caps

We can add images with the CardImg component.

Then we can align them with the top and bottom props.

For example, we can write:

import React from "react";
import {
  Card,
  Button,
  CardHeader,
  CardFooter,
  CardBody,
  CardTitle,
  CardText,
  CardImg
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Card>
        <CardImg
          top
          width="100%"
          src="http://placekitten.com/200/200"
          alt="Cat"
        />
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardFooter>Footer</CardFooter>
      </Card>

      <Card>
        <CardHeader tag="h3">Featured</CardHeader>
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardImg
          bottom
          width="100%"
          src="http://placekitten.com/200/200"
          alt="Cat"
        />
      </Card>
    </div>
  );
}

The CardImg can be placed on the card.

The top and bottom props place make the images flush to the edges.

Image Overlays

We can place images below the text with the CardImgOverlay component.

For example, we can write:

import React from "react";
import { Card, CardImgOverlay, CardTitle, CardText, CardImg } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Card inverse>
        <CardImg width="100%" src="http://placekitten.com/200/200" alt="Cat" />
        <CardImgOverlay>
          <CardTitle>Card Title</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus
            orci luctus et ultrices posuere cubilia curae; Mauris ultrices justo
            quis sapien faucibus ultricies. Phasellus vitae urna in mi euismod
            sagittis ac non nunc.
          </CardText>
          <CardText>
            <small className="text-muted">Last updated 10 mins ago</small>
          </CardText>
        </CardImgOverlay>
      </Card>
    </div>
  );
}

We have the inverse prop to change the text color to white.

All the content is placed into the CardImgOverlay so that they’re placed above the image.

Background Variants

We can change the style variants of the cards.

To do that, we set the color prop:

import React from "react";
import { Card, Button, CardTitle, CardText } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Card
        body
        inverse
        style={{ backgroundColor: "#333", borderColor: "#333" }}
      >
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button>Button</Button>
      </Card>
      <Card body inverse color="primary">
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button color="secondary">Button</Button>
      </Card>
      <Card body inverse color="success">
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button color="secondary">Button</Button>
      </Card>
      <Card body inverse color="info">
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button color="secondary">Button</Button>
      </Card>
      <Card body inverse color="warning">
        <CardTitle> Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button color="secondary">Button</Button>
      </Card>
      <Card body inverse color="danger">
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button color="secondary">Button</Button>
      </Card>
    </div>
  );
}

We set the color prop to the color we want.

We add the body prop to set the card to the body.

inverse change the content color to white.

Conclusion

We can add headers, footers, images, and overlays to cards.