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.

Image Overlays

We can add card backgrounds and overlays,

To do that, we can use the Card.ImgOverlay component.

For example, 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="https://dummyimage.com/700/ffffff/000000"
        />
        <Card.ImgOverlay>
          <Card.Title>Special 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>
          <Button variant="primary">Go</Button>
        </Card.ImgOverlay>
      </Card>
    </>
  );
}

to make our text display above an image.

We did that with the Card.ImgOverlay component.

Navigation

We can add navigation to the card’s header.

To do that we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import Nav from "react-bootstrap/Nav";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Card>
        <Card.Header>
          <Nav variant="tabs" defaultActiveKey="#first">
            <Nav.Item>
              <Nav.Link href="#first">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="#link">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="#disabled" disabled>
                Disabled
              </Nav.Link>
            </Nav.Item>
          </Nav>
        </Card.Header>
        <Card.Body>
          <Card.Title>Special 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>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
    </>
  );
}

We have a navbar on the top of the card since we add the Nav component to the Card.Header component.

defaultActiveKey has the key of the active tab.

This can be changed to the pills variant to display the nav links as buttons.

#technology #programming #web-development #software-development #javascript