Reactstrap — Cards and Groups

Photo by Clarissa Carbungco on Unsplash

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.

Photo by Filip Kowalski on Unsplash

Conclusion

We can group cards with card decks and card groups.

Also, we can add border colors to cards.

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store