Reactstrap — Card Customizations

Photo by Anna Pelzer 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.

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.

Photo by Micheile Henderson on Unsplash

Conclusion

We can add headers, footers, images, and overlays 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