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.
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.
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