React Bootstrap — Borders, and Placements of Cards

Photo by Loïc Fürhoff 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 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.

Photo by Darya Tryfanava on Unsplash

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.

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