title: Bootstrap Navbar with React
body: <p>I'm very new to React and I'm trying to get the navigation menu down with Bootstrap. I started with create-react-app and I can't seem to get it any functionality of a Bootstrap menu to work. </p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  import { Button } from 'reactstrap';
  import { Navbar, NavItem, NavDropdown, MenuItem, Nav } from 'react-bootstrap';
  
  class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;nav className="navbar navbar-default"&gt;
      &lt;div className="navbar-header"&gt;
        &lt;button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse"&gt;
          &lt;span className="icon-bar"&gt;&lt;/span&gt;
          &lt;span className="icon-bar"&gt;&lt;/span&gt;
          &lt;span className="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a className="navbar-brand" href="https://www.google.com"&gt;Product Shoppe&lt;/a&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Index.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import 'bootstrap/dist/css/bootstrap.css';
  import registerServiceWorker from './registerServiceWorker';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p><strong>HTML:</strong></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, shrink-to-fit=no"&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
  
      &lt;link rel="manifest" href="%PUBLIC_URL%/manifest.json"&gt;
      &lt;link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"&gt;
  
      &lt;title&gt;React App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="navbar"&gt;
  
      &lt;/div&gt;
      &lt;noscript&gt;
        You need to enable JavaScript to run this app.
      &lt;/noscript&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The current output looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/9CTYK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9CTYK.png" alt="enter image description here"></a></p>
  
  <p>I've followed this tut but it doesn't look anything like what is produced in the video: </p>
  
  <p><a href="https://www.youtube.com/watch?v=oUKJA6B1Xr4&amp;t=969s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=oUKJA6B1Xr4&amp;t=969s</a></p>
  
  <p>Anyone know what's going on? </p>