React Bootstrap — Borders and Placements of 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 customize React Bootstrap cards.

Border Color

We can change the border color of the cards.

For example, 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 (
    <>
      {[
        "Primary",
        "Secondary",
        "Success",
        "Danger",
        "Warning",
        "Info",
        "Light",
        "Dark"
      ].map((variant, idx) => (
        <Card
          border={variant.toLowerCase()}
          key={idx}
          style={{ width: "18rem" }}
          className="mb-2"
        >
          <Card.Header>Header</Card.Header>
          <Card.Body>
            <Card.Title>{variant} Card Title </Card.Title>
            <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.Body>
        </Card>
      ))}
    </>
  );
}

to render cards with various kinds of borders with the border prop.

Card Groups

We can group cards together with CardGroup components.

For example, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import CardGroup from "react-bootstrap/CardGroup";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <CardGroup>
        {[
          "Primary",
          "Secondary",
          "Success",
          "Danger",
          "Warning",
          "Info",
          "Light",
          "Dark"
        ].map((variant, idx) => (
          <Card
            bg={variant.toLowerCase()}
            key={idx}
            style={{ width: "18rem" }}
            className="mb-2"
            text={variant.toLowerCase() === "light" ? "dark" : "white"}
          >
            <Card.Header>Header</Card.Header>
            <Card.Body>
              <Card.Title>{variant} Card Title </Card.Title>
              <Card.Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Praesent ultrices ac dolor nec vestibulum. Maecenas vulputate
                diam ut sem tempus,
              </Card.Text>
            </Card.Body>
          </Card>
        ))}
      </CardGroup>
    </>
  );
}

We have a CardGroup component wrapped around multiple Card s.

Then they’ll display side by side if our screen is wide enough.

Card Deck

There’s also the CardDeck component to group cards together.

The difference between CardGroup and CardDeck is that there’re margins between cards in CardDeck and there’s none of that in CardGroup .

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import CardDeck from "react-bootstrap/CardDeck";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <CardDeck>
        {[
          "Primary",
          "Secondary",
          "Success",
          "Danger",
          "Warning",
          "Info",
          "Light",
          "Dark"
        ].map((variant, idx) => (
          <Card
            bg={variant.toLowerCase()}
            key={idx}
            style={{ width: "18rem" }}
            className="mb-2"
            text={variant.toLowerCase() === "light" ? "dark" : "white"}
          >
            <Card.Header>Header</Card.Header>
            <Card.Body>
              <Card.Title>{variant} Card Title </Card.Title>
              <Card.Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Praesent ultrices ac dolor nec vestibulum. Maecenas vulputate
                diam ut sem tempus,
              </Card.Text>
            </Card.Body>
          </Card>
        ))}
      </CardDeck>
    </>
  );
}

to add card decks.

Card Columns

We can also put cards into columns with CardColumns .

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import CardColumns from "react-bootstrap/CardColumns";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <CardColumns>
        {[
          "Primary",
          "Secondary",
          "Success",
          "Danger",
          "Warning",
          "Info",
          "Light",
          "Dark"
        ].map((variant, idx) => (
          <Card
            bg={variant.toLowerCase()}
            key={idx}
            style={{ width: "18rem" }}
            className="mb-2"
            text={variant.toLowerCase() === "light" ? "dark" : "white"}
          >
            <Card.Header>Header</Card.Header>
            <Card.Body>
              <Card.Title>{variant} Card Title </Card.Title>
              <Card.Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Praesent ultrices ac dolor nec vestibulum. Maecenas vulputate
                diam ut sem tempus,
              </Card.Text>
            </Card.Body>
          </Card>
        ))}
      </CardColumns>
    </>
  );
}

to display cards in columns if our screen is wide enough to have columns.

Conclusion

We can create cards and lay them out in various ways.

We can have card groups to have them side by side without margins between the cards.

Also, we can have card decks to have them side by side with margins between them.

And we can have card columns to place the cards in columns.

Border colors can also be changed.