React Bootstrap — Cards Customization

Photo by Ashes Sitoula 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.

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>Praesent ultrices ac</ListGroup.Item>
          <ListGroup.Item>Integer non ante</ListGroup.Item>
          <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
        </ListGroup>
      </Card>
    </>
  );
}

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

We can also have a header above the list group.

For example, 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 (…