I’m new using react bootstrap, and I’m trying to use a Carousel in a new App, however it’s giving me this bug even I import bootstrap css’ !

Here I’m sliding and that happens, also the slide is delayed, here’s my code:

    import './App.css';
    import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
    import 'bootstrap/dist/css/bootstrap.min.css';
    
    
    function App() {
      return (
        <div className="App">
    
    
          
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossOrigin="anonymous"></link>
    
    
   [![enter image description here][1]][1]
    <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
      <ol className="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div className="carousel-inner">
        <div className="carousel-item active">
        <img className='img'src={require('./boys.jpg')}  width='250px' height="250px"/>
        </div>
        <div className="carousel-item">
        <img className='img'src={require('./boys.jpg')}  width='250px' height="250px"/>
        </div>
        <div className="carousel-item">
        <img className='img'src={require('./boys.jpg')}  width='250px' height="250px"/>
        </div>
      </div>
      <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span className="carousel-control-prev-icon" aria-hidden="true"></span>
        <span className="sr-only">Previous</span>
      </a>
      <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span className="carousel-control-next-icon" aria-hidden="true"></span>
        <span className="sr-only">Next</span>
      </a>
    </div>
    
        </div>
      );
    }
    
    export default App;

>Solution :

It seems like you’re trying to use React Bootstrap Carousel, but you’re mixing up the usage of regular Bootstrap CSS with React Bootstrap components. Let’s correct the implementation:

First, ensure you have React Bootstrap installed in your project. You can install it via npm or yarn:

npm install react-bootstrap bootstrap

or

yarn add react-bootstrap bootstrap

Then, you can import the required components from React Bootstrap and use them in your code:

import React from 'react';
import { Carousel } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css'; // Your custom CSS file

function App() {
  return (
    <div className="App">
      <Carousel>
        <Carousel.Item>
          <img className="d-block w-100" src={require('./boys.jpg')} alt="First slide" />
        </Carousel.Item>
        <Carousel.Item>
          <img className="d-block w-100" src={require('./boys.jpg')} alt="Second slide" />
        </Carousel.Item>
        <Carousel.Item>
          <img className="d-block w-100" src={require('./boys.jpg')} alt="Third slide" />
        </Carousel.Item>
      </Carousel>
    </div>
  );
}

export default App;

In this code:

• We import Carousel component from react-bootstrap.
• We import the Bootstrap CSS file to ensure that styles are applied correctly.
• We import your custom CSS file if you have any additional styles.
• We use the Carousel component provided by React Bootstrap, and each Carousel.Item contains an image.

This should resolve the issues you’re facing with the carousel component. Make sure to adjust the image paths and any other styling according to your requirements.