Reactstrap — Cards and Groups

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.

Outline Variants

Cards have outlined variants

The borders have colors, but the rest don’t.

For example, we can add the outlines by adding the outline 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 color="primary" outline>
        <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 color="success" outline>
        <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 color="info" outline>
        <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 color="warning" outline>
        <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 color="danger" outline>
        <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 just put the outline prop with the color prop to add the borders we want.

Groups

We can put multiple cards into a container with the CardGroup component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <CardGroup>
        <Card>
          <CardImg
            top
            width="100%"
            src="http://placekitten.com/200/200"
            alt="Cat"
          />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            top
            width="100%"
            src="http://placekitten.com/200/200"
            alt="Cat"
          />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            top
            width="100%"
            src="http://placekitten.com/200/200"
            alt="Cat"
          />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
      </CardGroup>
    </div>
  );
}

We have multiple Card components in the CardGroup .

Then they’re placed side by side responsively.

They’ll be placed without margins between them.

Decks

Reactstrap also comes with the CardDeck component to group cards with margins.

For example, we can write:

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

export default function App() {
  return (
    <div className="App">
      <CardDeck>
        <Card>
          <CardImg
            top
            width="100%"
            src="http://placekitten.com/200/200"
            alt="Cat"
          />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            top
            width="100%"
            src="http://placekitten.com/200/200"
            alt="Cat"
          />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            top
            width="100%"
            src="http://placekitten.com/200/200"
            alt="Cat"
          />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
      </CardDeck>
    </div>
  );
}

We use the CardDeck component to place the cards side by side with margins between them.

Conclusion

We can group cards with card decks and card groups.

Also, we can add border colors to cards.