I am running bootstrap on React, and then using Storybook to view it. This is the code that I ran on Friday, and it was working without any problems. Today, I run it, and it's no longer working! I ran it on Jsfiddle and onecompiler, and still not working. I copied the carousel component from the bootstrap website, pasted it in my vscode, ran it, and it's not working! I pasted it in jsfiddle and onecompiler, and still not working! What is happening here? Why is it not working all of a sudden? Am I doing something wrong? By 'not working' I mean clicking on the left/right indicators does not move the slider!

Here's the code that I'm running:

<div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="true">
      <div className="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div className="carousel-inner">
        <div className="carousel-item active">
          <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" className="d-block w-100" alt="..." />
        </div>
        <div className="carousel-item">
          <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" className="d-block w-100" alt="..." />
        </div>
      </div>
      <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span className="carousel-control-prev-icon" aria-hidden="true"></span>
        <span className="visually-hidden">Previous</span>
      </button>
      <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span className="carousel-control-next-icon" aria-hidden="true"></span>
        <span className="visually-hidden">Next</span>
      </button>
    </div>

I just copied it from bootstrap, and just replaced class with className to make it work on React, but it's not working. Everywhere is where it's supposed to be with the exception that indicators and controls do not work.

I feel like the issue has to do with me using normal bootstrap for React, rather than React Bootstrap, which does work! But normal bootstrap also worked on Friday, why is it not working now? And why is it not working in any online compiler either? Does it work for you? Am I missing something?

CodePudding user response：

Try checking the following to find a possible resolution :

1. Check if you have provided link to bootstrap in index.html or alternatively have you correctly installed bootstrap using npm.
2. Have you installed or linked to the correct version of bootstrap for which you have taken the carousel.
3. In my opinion, rule of thumb to get through the styles in frontend is to inspect the elements and the console. Try checking if bootstrap styles are applied to the divs in the inspect element styles.