React Bootstrap — Cards

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.

Conclusion

Cards are containers that can have a variety of content,

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