title: Navbar component not displaying react-bootstrap CSS
body: <p>I am rendering a react-bootstrap navbar but I am just getting jumbled text with none of the bootstrap styles.</p>
  
  <p>I have the bootstrap CDN tag. I have installed react-bootstrap to the project with npm. I also made sure not to use the Bootstrap 4 tag, as home have said that doesn't work with react-bootstrap I added this following lines to index.html as instructed here <a href="https://react-bootstrap.github.io/getting-started/introduction/" rel="nofollow noreferrer">https://react-bootstrap.github.io/getting-started/introduction/</a>.</p>
  
  <pre><code>&lt;script src="https://unpkg.com/react/umd/react.production.js" crossorigin /&gt;
  
  &lt;script
    src="https://unpkg.com/react-dom/umd/react-dom.production.js"
    crossorigin
  /&gt;
  
  &lt;script
    src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
    crossorigin
  /&gt;
  
  &lt;script&gt;var Alert = ReactBootstrap.Alert;&lt;/script&gt;
  </code></pre>
  
  <p>I also tried all of the posted solutions for this problem that I could find. I'm not sure what I'm doing wrong here...</p>
  
  <p>Index.html (Only the script tags obviously)</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/react/umd/react.production.js" crossorigin /&gt;
      &lt;script
        src="https://unpkg.com/react-dom/umd/react-dom.production.js"
        crossorigin
      &gt;&lt;/script&gt;
  
      &lt;script
        src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
        crossorigin
      &gt;&lt;/script&gt;
  
      &lt;script&gt;var Alert = ReactBootstrap.Alert;&lt;/script&gt;
  
  </code></pre>
  
  <p>Index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  
  serviceWorker.unregister();
  
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React from 'react';
  import Navbar from 'react-bootstrap/Navbar'
  import Nav from 'react-bootstrap/Nav'
  import NavDropdown from 'react-bootstrap/NavDropdown'
  import logo from './logo.svg';
  import './App.css';
  
  function App() {
    return (
      &lt;div className="App"&gt;
      &lt;Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"&gt;
        &lt;Navbar.Brand href="#home"&gt;React-Bootstrap&lt;/Navbar.Brand&gt;
        &lt;Navbar.Toggle aria-controls="responsive-navbar-nav" /&gt;
        &lt;Navbar.Collapse id="responsive-navbar-nav"&gt;
          &lt;Nav className="mr-auto"&gt;
            &lt;Nav.Link href="#features"&gt;Features&lt;/Nav.Link&gt;
            &lt;Nav.Link href="#pricing"&gt;Pricing&lt;/Nav.Link&gt;
            &lt;NavDropdown title="Dropdown" id="collasible-nav-dropdown"&gt;
              &lt;NavDropdown.Item href="#action/3.1"&gt;Action&lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Item href="#action/3.2"&gt;Another action&lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Item href="#action/3.3"&gt;Something&lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Divider /&gt;
              &lt;NavDropdown.Item href="#action/3.4"&gt;Separated link&lt;/NavDropdown.Item&gt;
            &lt;/NavDropdown&gt;
          &lt;/Nav&gt;
          &lt;Nav&gt;
            &lt;Nav.Link href="#deets"&gt;More deets&lt;/Nav.Link&gt;
            &lt;Nav.Link eventKey={2} href="#memes"&gt;
              Dank memes
            &lt;/Nav.Link&gt;
          &lt;/Nav&gt;
        &lt;/Navbar.Collapse&gt;
      &lt;/Navbar&gt;;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>