How to usevariant=”dark” in ReactJS
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.
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 variant= "dark" > <Carousel.Item interval={1500}> <img className= "d-block w-100" src= "https://media.w3wiki.org/wp-content/cdn-uploads/Java.png" alt= "JAVA" /> </Carousel.Item> <Carousel.Item interval={1500}> <img className= "d-block w-100" src= "https://media.w3wiki.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png" alt= "HTML" /> </Carousel.Item> <Carousel.Item interval={1500}> <img className= "d-block w-100" src= "https://media.w3wiki.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" alt= "Angular" /> </Carousel.Item> </Carousel> </div> ); } |
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:
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.
Contact Us