title: React not applying css styles
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import Nav from './blocks/Nav';
  import 'bootstrap/dist/css/bootstrap.css';
  
  ReactDOM.render( &lt; App / &gt; , document.getElementById('root'));
  registerServiceWorker();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="my-app"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a react app with boostrap.css included but the styles are not being applied to the elements for some reason. </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import Nav from './blocks/Nav';
  
  ReactDOM.render(&lt;Nav /&gt;, document.getElementById('top-nav'));
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p>I am trying to this file which contains page navigation and called <code>/blocks/nav.js</code></p>
  
  <pre><code>   import React from 'react';
  
     export default class Nav extends React.Component {
      render() {
         return (
            &lt;nav id='..'&gt; &lt;/nav&gt;
          )
        }
      }
  </code></pre>
  
  <p>I have included bootstrap.min.css in my index.html but the no style is being applied to the nav, if I however take the <code>&lt;nav id='..'&gt; &lt;/nav&gt;</code> from the component and put it in my index.html then all styles get applied</p>
  
  <h2>UPDATE:</h2>
  
  <p>To clarify, this is my index.js</p>
  
  <pre><code>    import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './App';
      import registerServiceWorker from './registerServiceWorker';
      import Nav from './blocks/Nav';
      import 'bootstrap/dist/css/bootstrap.css';
  
      ReactDOM.render(&lt;Nav /&gt;, document.getElementById('my-nav'));
      ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
      registerServiceWorker();
  </code></pre>
  
  <p>And this is my blocks/Nav.js</p>
  
  <pre><code>import React from 'react';
  
  
  export default class Nav extends React.Component {
      render() {
      return (
  
  &lt;div id="top-nav" class="navbar navbar-inverse navbar-static-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
            &lt;span class="icon-toggle"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;Dashboard&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
  
          &lt;li class="dropdown"&gt;
            &lt;a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt; Admin &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul id="g-account-menu" class="dropdown-menu" role="menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-lock"&gt;&lt;/i&gt; Logout&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  )
      }
  }
  </code></pre>
  
  <p>And this is my 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, 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;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;noscript&gt;
        You need to enable JavaScript to run this app.
      &lt;/noscript&gt;
      &lt;div id="my-nav"&gt;&lt;/div&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now the problem is the nav bar displays without any styles unless I write the code in the index.html</p>