CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
Melissa Stewart
Melissa Stewart

Reputation: 3605

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/

This is my code,

import React from 'react';
import Carousel1 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-01.png';
import Carousel2 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-02.png';
import Carousel3 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-03.png';
import Carousel4 from 
import Carousel from 'react-bootstrap/lib/Carousel';


    const Core = () => (
        <main className="core">
            <article className="left">
                <Carousel>
                    <Carousel.Item>
                        <img src={Carousel1} alt=""/>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img src={Carousel2} alt=""/>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img src={Carousel3} alt=""/>
                    </Carousel.Item>
                </Carousel>

            </article>
            <article className="right"></article>
        </main>

    );
    export default Core

The images get vertically stacked and no transition happens. What am I doing wrong here.

Upvotes: 6

Views: 19652

Answers (3)

Thavaprakash Swaminathan
Thavaprakash Swaminathan

Reputation: 6976

This is what I did. It works fine.

Add below line in index.js

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

Upvotes: 3

Ca Duong Ho Tinh
Ca Duong Ho Tinh

Reputation: 81

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 :)

Upvotes: 8

StackedQ
StackedQ

Reputation: 4139

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 stylesheet 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 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

Upvotes: 3

Related Questions