title: Bootstrap columns doesn't behave properly in Google Chrome Inspector
body: <p>It seems like when I'm trying to test it in Chrome inspector it's not responding as it should according to the code (the columns shrink) However, it works when I'm scaling the Chrome's window or in Firefox/Edge/Explorer's inspectors. </p>
  
  <p>Kind of trivial problem but it's upsetting since I've got used to using mainly Chrome, or maybe it is a grave problem which I don't understand?</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  &lt;html lang="pl-PL"&gt;
  
  &lt;head&gt;
      &lt;title&gt;Bootstrap tutorial&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="description" content="Ucze sie bootstrapa na tutku z yt"&gt;
      &lt;link rel="icon" href="boot.ico" type="image/x-icon"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
      &lt;meta name="viewport" content" width=device-width, initial-scale=1"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE-edge"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="container"&gt;
  
          &lt;div class="row"&gt;
  
              &lt;div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"&gt;
  
                  &lt;h4&gt;Column 1&lt;/h4&gt;
                  Lorem ipsum dolor sit amet
              &lt;/div&gt;
              &lt;div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"&gt;
                  &lt;h4&gt;Column 2&lt;/h4&gt;
                  Lorem ipsum dolor sit amet
              &lt;/div&gt;
              &lt;div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"&gt;
                  &lt;h4&gt;Column 3&lt;/h4&gt;
                  Lorem ipsum dolor sit amet
              &lt;/div&gt;
              &lt;div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"&gt;
                  &lt;h4&gt;Column 4&lt;/h4&gt;
                  Lorem ipsum dolor sit amet
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
          crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <ul>
  <li><a href="https://i.stack.imgur.com/1MyRn.png" rel="nofollow noreferrer">Chrome inspector</a>  </li>
  <li><a href="https://i.stack.imgur.com/oKzCS.png" rel="nofollow noreferrer">Shrinking the window</a></li>
  </ul>