React Bootstrap — Cards

Photo by Wolfgang Hasselmann on Unsplash

React Bootstrap is one version of Bootstrap made for React.

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

In this article, we’ll look at how to work with React Bootstrap cards.

Cards

Cards provide us with a flexible content container with multiple variants and options.

To use it, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Card style={{ width: "20rem" }}>
<Card.Img variant="top" src="http://placekitten.com/200/200" />
<Card.Body>
<Card.Title> Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
eget lectus a ante convallis gravida. Donec fringilla odio ut magna
gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
nibh, vitae eleifend quam. Duis a enim lacus.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</>
);
}

We have Card component with child components inside it.

Card.Img has the image we want to display on the card.

variant='top' makes it display on top.

src is the URL of the image.

Card.Body has the body of the card.

Card.Title has the title of the card.

Card.Text has the text of the card.

The card body can be shortened to:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Card body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem tempus,
id eleifend tortor hendrerit. Sed non orci massa. Aliquam eget lectus a
ante convallis gravida. Donec fringilla odio ut magna gravida aliquam.
Cras molestie non ante vel dictum. Cras lacinia molestie lacus, in
lacinia sapien imperdiet in. Sed eleifend laoreet finibus. Integer
semper dictum eros nec eleifend. Nunc quam mi, finibus lacinia metus
vitae, dapibus ultricies diam. Vivamus ante nisi, pellentesque at lacus
eu, vehicula pretium lorem. Nunc vitae ligula laoreet, accumsan diam et,
auctor mauris. Fusce vitae posuere nibh, vitae eleifend quam. Duis a
enim lacus.
</Card>
</>
);
}

We just add the body prop to the Card to make a simple card with text.

Title, Text, and Links

Card.Title has the title of the body.

Card.Subtitle has the subtitle.

Card.Text has the main text content.

Card.Body group those together with one container.

Card.Text output p tags around the content, so we can have more than one of them.

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Card style={{ width: "20rem" }}>
<Card.Body>
<Card.Title> Title</Card.Title>
<Card.Subtitle className="text-muted">Card Subtitle</Card.Subtitle>
<Card.Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
eget lectus a ante convallis gravida. Donec fringilla odio ut magna
gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
nibh, vitae eleifend quam. Duis a enim lacus.
</Card.Text>
<Card.Link href="#"> Link</Card.Link>
<Card.Link href="#">Another Link</Card.Link>
</Card.Body>
</Card>
</>
);
}

We have all of those components in one card.

List Groups

We can add ListGroup s to cards.

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import ListGroup from "react-bootstrap/ListGroup";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Card style={{ width: "20rem" }}>
<ListGroup variant="flush">
<ListGroup.Item>Lorem ipsum dolor</ListGroup.Item>
<ListGroup.Item>sit amet</ListGroup.Item>
<ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>
</Card>
</>
);
}

We have a ListGroup in the Card to display it inside the card.

Photo by Cristina Gottardi on Unsplash

Conclusion

Cards are containers that can have a variety of content,

They include titles, subtitles, images, links, paragraphs, links, list groups etc.

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