React Bootstrap Components not displaying

Question

I'm trying to test out the carousel but when I load the page it is blank.

I installed react bootstrap with npm.

The carousal code is from https://react-bootstrap.github.io/components.html#media-content. I looked at my web console and I don't have any warnings or errors either.

carousal.js

import React, { Component } from 'react';
import {Carousel} from 'react-bootstrap';
class carousel extends Component {
    render() {
        return (
            <Carousel>
                <Carousel.Item>
                    <img width={900} height={500} alt="900x500" src={require('./images/cs_logo.png')}/>
                    <Carousel.Caption>
                        <h3>First slide label</h3>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img width={900} height={500} alt="900x500" src={require('./images/cs_logo.png')}/>
                    <Carousel.Caption>
                        <h3>Second slide label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img width={900} height={500} alt="900x500" src={require('./images/cs_logo.png')}/>
                    <Carousel.Caption>
                        <h3>Third slide label</h3>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        );
    }
}

export default carousel;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import carousel from './carousal';

ReactDOM.render(<carousel/>,document.getElementById('root'));

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">  
    <title>title</title>
</head>

<body>
<header>
<div id="nav"></div>
</header>
<div id="root" style="text-align: center; float: none"></div>
</body>

</html>

beciaha · Accepted Answer · 2016-11-12 20:26:41Z

1

Did you include js files to html file?

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.6/react-bootstrap.js" > </srcipt>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.6/react-bootstrap.js" > </srcipt>

answered Nov 12, 2016 at 20:26

beciaha

716 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3034572 Over a year ago

I tried adding it and now I get this error in console "react-bootstrap.js:2037 Uncaught TypeError: Cannot read property 'PropTypes' of undefined(…)exports.__esModule @ react-bootstrap.js:2037__webpack_require__ @ react-bootstrap.js:30exports.__esModule @ react-bootstrap.js:430__webpack_require__ @ react-bootstrap.js:30exports.__esModule @ react-bootstrap.js:62__webpack_require__ @ react-bootstrap.js:30exports.__esModule @ react-bootstrap.js:50(anonymous function) @ react-bootstrap.js:53webpackUniversalModuleDefinition @ react-bootstrap.js:9(anonymous function) @ react-bootstrap.js:10"

user18699279 · Accepted Answer · 2022-04-04 07:50:31Z

1

Add this in index.js file

import 'bootstrap/dist/css/bootstrap.css';

answered Apr 4, 2022 at 7:50

user18699279

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Community · Accepted Answer · 2017-05-23 10:30:31Z

0

Found the solution. It is not Bootstrap related but rather how I was exporting and naming my components.

Components need to capitalized as stated here. Simple React component not rendering

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Nov 14, 2016 at 1:29

user3034572

1051 gold badge3 silver badges9 bronze badges

Comments

Jayanth MKV · Accepted Answer · 2022-11-25 16:29:19Z

0

Add the CDN link in index.html. Although you found it this would help others.

<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"/>

or add this in app.css

@import "bootstrap/dist/css/bootstrap.css";

answered Nov 25, 2022 at 16:29

Jayanth MKV

3834 silver badges6 bronze badges

Collectives™ on Stack Overflow

React Bootstrap Components not displaying

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related