title: Bootstrap breakpoints not working properly in the chrome inspector?
body: <p>EDIT: I am completely rewriting this question because I don't think I was being clear enough in my original posting.</p>
  
  <p>According to bootstrap's website, the browser widths for each category of column should be as follows:</p>
  
  <pre><code>// Extra small devices (portrait phones, less than 576px)
  // No media query since this is the default in Bootstrap
  
  // Small devices (landscape phones, 576px and up)
  @media (min-width: 576px) { ... }
  
  // Medium devices (tablets, 768px and up)
  @media (min-width: 768px) { ... }
  
  // Large devices (desktops, 992px and up)
  @media (min-width: 992px) { ... }
  
  // Extra large devices (large desktops, 1200px and up)
  @media (min-width: 1200px) { ... }
  
  // Extra small devices (portrait phones, less than 576px)
  @media (max-width: 575px) { ... }
  
  // Small devices (landscape phones, less than 768px)
  @media (max-width: 767px) { ... }
  
  // Medium devices (tablets, less than 992px)
  @media (max-width: 991px) { ... }
  
  // Large devices (desktops, less than 1200px)
  @media (max-width: 1199px) { ... }
  
  // Extra large devices (large desktops)
  // No media query since the extra-large breakpoint has no upper bound on its width
  </code></pre>
  
  <p>In summary: col-xl is 1200 pixels and up, lg is between 992-1199, md is 768-991, sm is 576-768, and xs is up to 575.</p>
  
  <p>My problem is that for some reason, my webpage is behaving as if xs is sm, sm is md, md is lg, and lg is xl.</p>
  
  <p>View this codepen in the google chrome inspector: <a href="https://codepen.io/colesam/full/YxjVwW/" rel="nofollow noreferrer">https://codepen.io/colesam/full/YxjVwW/</a></p>
  
  <p>There should be three items per row in lg and up, sm and md should be 2 per row, and xs should be 1.</p>
  
  <p>See below in two examples:</p>
  
  <p><a href="https://i.stack.imgur.com/Hjv5b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hjv5b.png" alt="enter image description here"></a></p>
  
  <p>EDIT 2: My header includes the following meta tag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  </code></pre>
  
  <p>EDIT 3: I have now tried inspecting the page on two separate computers but I am getting the same result. I also updated Bootstrap but to no avail. I'm really quite baffled as to why this would be happening. I tried adding xl columns to the html and no matter how large the screen size, the xl columns would not activate.</p>
  
  <p>Here is an image of the google chrome inspector tool. It shows that .col-md-* is activated even though we are within the bounds for lg columns:</p>
  
  <p><a href="https://i.stack.imgur.com/dJu66.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dJu66.png" alt="enter image description here"></a></p>