title: I copy and pasted Navbar example from react-bootstrap docs and receiving error and styling doesn't match docs
body: <p>I took <a href="https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly" rel="nofollow noreferrer">this Navbar code example</a> from the react-bootstrap docs and put it into my component JavaScript file. According to the docs, it should appear in my browser like here:</p>
  
  <p><img src="https://i.stack.imgur.com/zCVDq.png" alt="react-bootstrap docs component example"> </p>
  
  <p>...but mine looks like this instead: </p>
  
  <p><img src="https://i.stack.imgur.com/odWBH.png" alt="my nav component"></p>
  
  <p>In addition, I had to remove the <code>NavDropdown.Divider</code> line from the react-bootstrap sample because it was causing:</p>
  
  <pre><code>Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  </code></pre>
  
  <p>I have <code>import 'bootstrap/dist/css/bootstrap.min.css';</code> in my index.js file.</p>
  
  <p>Does anyone see the problem here?</p>
  
  <p><strong>My package.json:</strong></p>
  
  <pre><code>{
    "name": "consilio-ui",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "bootstrap": "^4.2.1",
      "react": "^16.8.1",
      "react-bootstrap": "^1.0.0-beta.5",
      "react-dom": "^16.8.1",
      "react-scripts": "2.1.5",
      "typescript": "^3.3.3"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      "&gt;0.2%",
      "not dead",
      "not ie &lt;= 11",
      "not op_mini all"
    ]
  }
  </code></pre>
  
  <p><strong>My App.js:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import DesignerNavbar from './DesignerNavbar/DesignerNavbar';
  
  class App extends Component {
      render() {
          return (
              &lt;div className="App"&gt;
                  &lt;DesignerNavbar&gt;&lt;/DesignerNavbar&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>My DesignerNavbar.js:</strong></p>
  
  <pre><code>import React from 'react';
  import Navbar from 'react-bootstrap/Navbar';
  import Nav from 'react-bootstrap/Nav';
  import NavDropdown from 'react-bootstrap/Nav';
  
  const designerNavbar  = (props) =&gt; {
      return (
          &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.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;
      )
  };
  
  export default designerNavbar;
  </code></pre>