Search code examples
javascriptreactjscarouselreact-bootstrap

React Bootstrap Carousal styling not rendering


My react boot strap carousel isn't rendering with the proper styling.

import React from "react";
import RBCarousel from "react-bootstrap-carousel";

export default class StampCards extends React.PureComponent {
    constructor(props) {
    super(props);
}

render() {
    return (
        <div className="slider-container">
            <RBCarousel animation={true} autoplay={false} slideshowSpeed= 
             {2000} version={4} onSelect={this.onSelect} ref={r => 
            (this.slider = r)}>
                <div>Page1</div>
                <div>Page2</div>
            </RBCarousel>
       </div>
);}}

Here's what renders enter image description here

But what I want is something like this https://skycloud1030.github.io/react-bootstrap-carousel/example/demoV3.html

Problem was I forgot to import the bootstrap css


Solution

  • Try import

    import ReactDOM from "react-dom";
    import "react-bootstrap-carousel/dist/react-bootstrap-carousel.css";