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 carousels and dropdowns.
Carousels
Carousels are slideshow components that let us cycle through elements.
The slides can have images or text.
For example, we can use them by writing:
import React from "react";
import Card from "react-bootstrap/Card";
import Carousel from "react-bootstrap/Carousel";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Carousel>
<Carousel.Item>
<img
className="d-block w-100"
src="http://placekitten.com/500/500"
alt="First slide"
/>
<Carousel.Caption>
<h3>First slide</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
ultrices ac dolor nec vestibulum.{" "}
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="http://placekitten.com/500/500"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Second slide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="http://placekitten.com/500/500"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Third slide</h3>
<p>
Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
porttitor,
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</>
);
}
We imported the Carousel component, which has the Carousel.Item to display the item.
Inside it, we can display an image.
Also, we can add a caption for the image with the Carousel.Caption component.
We can have anything inside the caption.
Controlled Slides
We can control the carousel state using th activeIndex and onSelect handler.
For example, we can write:
import React from "react";
import Carousel from "react-bootstrap/Carousel";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
const [index, setIndex] = React.useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
<>
<Carousel activeIndex={index} onSelect={handleSelect}>
<Carousel.Item>
<img
className="d-block w-100"
src="http://placekitten.com/500/500"
alt="First slide"
/>
<Carousel.Caption>
<h3>First slide</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
ultrices ac dolor nec vestibulum.{" "}
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="http://placekitten.com/500/500"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Second slide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="http://placekitten.com/500/500"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Third slide</h3>
<p>
Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
porttitor,
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
<p>{index}</p>
</>
);
}
We have the index state and the setIndex function to change it.
Then we pass index as the value of the activeIndex prop to let us set the slide to go to.
onSelect has the handleSelect function as the value to let us set the index when carousel navigation is done.
We then display the index of the current slide below the carousel.
Dropdowns
We can add dropdowns to our React app with the Dropdown component.
For instance, we can write:
import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Dropdown>
<Dropdown.Toggle variant="primary">Dropdown Button</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/foo">foo</Dropdown.Item>
<Dropdown.Item href="#/bar">bar</Dropdown.Item>
<Dropdown.Item href="#/baz">baz</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
}
We have the Dropdown component that has the Dropdown.Toggle component to show the toggle.
Dropdown.Menu shows the menu when the toggle is clicked.
href can have any URL that we want to go to.
variant is the styling variant.
To make it shorter, we can use the DropdownButton component to combine the Dropdown and Dropdown.Toggle component into one.
For example, we can write:
import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<DropdownButton title="Dropdown button">
<Dropdown.Item href="#/foo">foo</Dropdown.Item>
<Dropdown.Item href="#/bar">bar</Dropdown.Item>
<Dropdown.Item href="#/baz">baz</Dropdown.Item>
</DropdownButton>
</>
);
}
The title prop has the text content of the toggle.
The Dropdown.Toggle and the Dropdown.Menu wrapper are eliminated because we have the Dropdown.button component.
Styling Variants
We can set the variant prop to change the styles of the dropdown.
For instance, we can write:
import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
{["Primary", "Secondary", "Success", "Info", "Warning", "Danger"].map(
variant => (
<DropdownButton
as={ButtonGroup}
key={variant}
variant={variant.toLowerCase()}
title={variant}
>
<Dropdown.Item eventKey="1">foo</Dropdown.Item>
<Dropdown.Item eventKey="2">bar</Dropdown.Item>
<Dropdown.Item eventKey="3" active>
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">baz</Dropdown.Item>
</DropdownButton>
)
)}
</>
);
}
to display the dropdown with all the colors.
Conclusion
Carousels are slideshows with text and images in the slides.
Dropdowns can have many varieties.
