React Bootstrap Components not displaying
<p>I'm trying to test out the carousel but when I load the page it is blank.</p>

<p>I installed react bootstrap with npm. </p>

<p>The carousal code is from <a href="https://react-bootstrap.github.io/components.html#media-content" rel="nofollow noreferrer">https://react-bootstrap.github.io/components.html#media-content</a>. I looked at my web console and I don't have any warnings or errors either. </p>

<p>carousal.js</p>

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

export default carousel;
</code></pre>

<p>index.js</p>

<pre><code>import React from 'react';
import ReactDOM from 'react-dom';
import carousel from './carousal';

ReactDOM.render(&lt;carousel/&gt;,document.getElementById('root'));
</code></pre>

<p>index.html</p>

<pre><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;

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

&lt;body&gt;
&lt;header&gt;
&lt;div id="nav"&gt;&lt;/div&gt;
&lt;/header&gt;
&lt;div id="root" style="text-align: center; float: none"&gt;&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>