title: Bootstrap switch doesn't work on localhost and Chrome
body: <p>I've got weird problem with Chrome browser that I use for development purposes. I've created dashboard with <a href="https://github.com/nostalgiaz/bootstrap-switch" rel="nofollow noreferrer">Bootstrap Switch plugin</a> and everything was fine till another system reboot. For some reason, that one plugin stopped styling properly.</p>
  
  <p><a href="https://i.stack.imgur.com/A85tI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A85tI.png" alt="styling error"></a></p>
  
  <p>No errors in dev console.</p>
  
  <p>I thought it was related to cache (reloaded page, reloaded without cache, cleared cache) - nothing. </p>
  
  <p>Checked with IE and... it works OK. </p>
  
  <p>Suspecting cache to be the problem, I've changed the folder where I keep the website. Still nothing. </p>
  
  <p>All Chrome addons disabled - nothing.</p>
  
  <p>Next thought was some kind of collision with other scripts, so I removed one after another until I was left with whatever is required to run that plugin - and still nothing! </p>
  
  <p>I tried with Firefox and it works okay.</p>
  
  <p>I accessed the website I got already deployed on server, where it was still working and the plugin ran okay. But when I downloaded it to localhost - the problem reappeared.</p>
  
  <p>Finally I've discovered, that whenever I access my website locally using <a href="http://localhost" rel="nofollow noreferrer">http://localhost</a> - it somewhat crashes the styles. Changing to <a href="http://127.0.0.1" rel="nofollow noreferrer">http://127.0.0.1</a> fixed the problem - or rather appeared to be a workaround.</p>
  
  <p><a href="https://i.stack.imgur.com/5FbjJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5FbjJ.png" alt="enter image description here"></a></p>
  
  <p>Any ideas why is this happening?</p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/bootstrap-switch.min.css" rel="stylesheet"&gt;
  
      &lt;link href="css/bootstrap-theme.min.css" rel="stylesheet"&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="container"&gt;
  
  
          &lt;div id="panel_control_manual" class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                &lt;h3 class="panel-title"&gt;TEST&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                Panel content 
                &lt;input type="checkbox" checked&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- /container --&gt;
  
      &lt;script type="text/javascript" src="js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/bootstrap-switch.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(":checkbox").bootstrapSwitch();
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>