React Boostrap Carousel Not Working

I'm trying to create a simple carousel using react-bootstrap. This is the simple uncontrolled carousel I'm trying to create. https://react-bootstrap.github.io/components/carousel/

Solution 1:

Did you linked the style files?

According to docs:

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

For linking add following to index.html:

<!-- Latest compiled and minified CSS --><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><!-- Optional theme --><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous">

Solution 2:

I also had the exact same problem. In public/index.html file, instead of linking to

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

I changed it to

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

It worked :)

Solution 3:

This is what I did. It works fine.

Add below line in index.js

import"../../node_modules/bootstrap/dist/css/bootstrap.css"