title: how to solve "style sheet could not be loaded" in Bootstrap
body: <p>I should at least get grey color navbar but I am getting red sign error in the bottom "Stylesheet could not be loaded". Even trying to remove one css at a time but nothing help.</p>
  
  <p>I am also getting this error in console "ReferenceError: Popper is not defined".
  Even I am not getting auto suggest in sublime related to bootstrap classes.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;!-- Website Title &amp; Description for Search Engine purposes --&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;meta charset="UTF-8" name="description" content=""&gt;
  
          &lt;!-- Mobile viewport optimized --&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  
          &lt;!-- Bootstrap CSS --&gt;
          &lt;link href="bootstrap/css/bootstrap.css" rel="stylesheet"&gt;
          &lt;link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet"&gt;
  
          &lt;!-- Custom CSS --&gt;
          &lt;link href="includes/css/styles.css" rel="stylesheet"&gt;
  
          &lt;!-- Include Modernizr in the head, before any other Javascript --&gt;
          &lt;script src="includes/js/modernizr-2.6.2.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;div class="container" id="main"&gt;
  
          &lt;div class="navbar navbar-fixed-top"&gt;
              &lt;div class="container"&gt;
                  &lt;a class="navbar-brand" href="/" src="/images/logo.png" alt="your logo"/&gt;
              &lt;/div&gt;&lt;!-- end container--&gt;
          &lt;/div&gt;&lt;!-- end navbar--&gt;
  
          &lt;div class="carousel slide" id="myCarousel"&gt;
  
          &lt;/div&gt;&lt;!-- end Carousel --&gt;
  
          &lt;div class="row" id="bigCallout"&gt;
  
          &lt;/div&gt;&lt;!-- end bigCallout--&gt;
  
          &lt;div class="row" id="featuresHeading"&gt;
  
          &lt;/div&gt;&lt;!-- end featuresHeading--&gt;
  
          &lt;div class="row" id="features"&gt;
  
          &lt;/div&gt;&lt;!-- end features--&gt;
  
          &lt;div class="row" id="moreInfo"&gt;
  
          &lt;/div&gt;&lt;!-- end moreInfo--&gt;
  
          &lt;div class="row" id="moreCourses"&gt;
          &lt;/div&gt; &lt;!-- end moreCourses --&gt;
  
      &lt;/div&gt;&lt;!--end container --&gt;
  
      &lt;footer&gt;
      &lt;/footer&gt;
  
      &lt;!-- All Javascript at the bottom of the page for faster page loading --&gt;
  
      &lt;!-- First try for the online version of jQuery--&gt;
      &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  
      &lt;!-- If no online access, fallback to our hardcoded version of jQuery --&gt;
      &lt;script&gt;window.jQuery || document.write('&lt;script src="includes/js/jquery-1.8.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
  
      &lt;!-- Bootstrap JS --&gt;
      &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Custom JS --&gt;
      &lt;script src="includes/js/script.js"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>