Setting data-bs-theme=”dark”
In this approach, on the root element, a parent wrapper, or the component itself for darker controls, indicators, and captions.
Syntax:
<Carousel data-bs-theme="dark">
...
</Carousel>
Example: In this example , we will set data-bs-theme=”dark” on the root element, a parent wrapper, or the component itself for darker controls, indicators, and captions.
Javascript
import React,{useState} from 'react';import Carousel from 'react-bootstrap/Carousel';export default function App() { return ( <div style={{ display: 'block', width: 700, padding: 30 }}> <h2 style={{ color: 'green' }}>w3wiki</h2> <h2>React-Bootstrap Carousel Dark variant</h2> <Carousel data-bs-theme="dark" > <Carousel.Item interval={1500}> <img className="d-block w-100" src="https://media.w3wiki.org/wp-content/uploads/20210425122739/2-300x115.png" alt="Image One" /> <Carousel.Caption> <h6>Label for first slide</h6> <p>Sample Text for Image One</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item interval={1500}> <img className="d-block w-100" src="https://media.w3wiki.org/wp-content/uploads/20210425122716/1-300x115.png" alt="Image Two" /> <Carousel.Caption> <h6>Label for second slide</h6> <p>Sample Text for Image Two</p> </Carousel.Caption> </Carousel.Item> </Carousel> </div> );} |
Output:
React-Bootstrap Carousel Dark variant
React-Bootstrap is a front-end framework that was designed keeping React in mind. Carousel Component provides a way to create a slideshow for our images or text slides in a present full manner in a cyclic way. In this article, we will learn about React-Bootstrap Carousel Dark variant.