1

Hi I have installed bootstrap using the standard npm install react-bootstrap bootstrap command and implemented the carousel code from the bootstrap site but i don't get the carousel. Images are displaying one by one here's my code

import React, {Component} from 'react';
**import {Carousel} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';**
import CleanHands from '../Images/cleanhands.jpg';
import Heroes from '../Images/heroes.jpg';  

class ImageCarousel extends Component {

    render() {
        return(
                <Carousel>
                    <Carousel.Item>
                        <img
                        className="d-block w-100"
                        src={CleanHands}
                        alt="First slide"
                        style={{width:"40px", height:"40px"}}
                        />
                    </Carousel.Item>
                    <Carousel.Item>
                        <img
                        className="d-block w-100"
                        src={Heroes}
                        alt="Third slide"
                        />
                    </Carousel.Item>

                    <Carousel.Item>
                        <img
                        className="d-block w-100"
                        src={CleanHands}
                        alt="Third slide"
                        />
                    </Carousel.Item>
                </Carousel>

        );
    }
}

export default ImageCarousel;
Vivek
  • 11
  • 1
  • 2

1 Answers1

1

You need to import bootstrap css in your App.jsx:

// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

I can see you have it in your carousel but you should import it in App. Also, you need to install bootstrap as the doc says in its Getting Started section.

That what i needed for the carousel to work on my repro on Stackblitz

Quentin Grisel
  • 4,794
  • 1
  • 10
  • 15
  • I tried your suggestion it still didn't work for me i added in app.js, index.js and the js file where i import it still it is not working images are showing one by one import 'bootstrap/dist/css/bootstrap.min.css'; could you please help me solve this i've been trying it for close to 2 hours now – Vivek May 24 '20 at 20:16
  • It's working like a charm on my stackblitz even when copying your whole component. try importing the css as the last import of your app.js. Also, what is your react, react-dom, bootstrap, react-bootstrap versions please ? If you could reproduce your bug (A stackblitz or codeSandbox would be perfect) or provide all the code of your project to reproduce it that would be great – Quentin Grisel May 24 '20 at 20:24
  • "bootstrap": "^4.5.0", "react-bootstrap": "^1.0.1", "react-dom": "^16.13.1", "react": "^16.13.1", These are the versions i use i also get warning but i don't know if it is related to this issue DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME – Vivek May 25 '20 at 05:38
  • Nothing is wrong here so I don't know what could makes it break. can you try to reproduce your bug on codesandbox please ? (material-ui does not works well on stackblitz). You can also try to uninstall material-ui, maybe it provoque some collisions between packages – Quentin Grisel May 25 '20 at 10:09
  • i tried with a new workspace it worked i don't know what's the problem i uninstalled using the npm uninstall bootstrap react-bootstrap command and then installed again then also i get same issues. – Vivek May 25 '20 at 10:52
  • Try installing material-ui on your new workspace to see. I'm pretty sure your problem come from one of your package – Quentin Grisel May 25 '20 at 12:27