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.

• NPM or NPX
• React JS

There are two approaches to add dark variant to the carousel in the React-Bootstrap:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install react-bootstrap 
npm install bootstrap

Project Structure: It will look like the following.

In this approch, on the root element, a parent wrapper, or the component itself for darker controls, indicators, and captions.

Syntax:

<Carousel variant="dark">
         ...
</Carousel>

Example: In this example, we can see dark variant of the controls and indicators using variant=”dark”. Here, App is our default component where we have written our code.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

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.

Output: