title: Bootstrap 3.0 Media queries
body: <p>I'm working on a small project based on Boostrap 3 (html5boilerplate custom build) and trying to use the "official" media queries <a href="http://getbootstrap.com/css/#grid-media-queries" rel="noreferrer">in the boostrap documentation</a>:</p>
  
  <pre><code>/* Extra small devices (phones, up to 480px) */
  /* No media query since this is the default in Bootstrap */
  
  /* Small devices (tablets, 768px and up) */
  @media (min-width: @screen-sm) { ... }
  
  /* Medium devices (desktops, 992px and up) */
  @media (min-width: @screen-md) { ... }
  
  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: @screen-lg) { ... }
  </code></pre>
  
  <p>For some reason the media queries doesn't seem to exist (@screen-sm, screen-md, screen-lg), I'm searching for this in the bootstrap files but can't find any references.</p>
  
  <p>My example code (main.css):</p>
  
  <pre><code>/* Small devices (tablets, 768px and up) */
  @media (min-width: @screen-sm) {
  
      .header-btn {display: none;}
  
  }
  
  /* Medium devices (desktops, 992px and up) */
  @media (min-width: @screen-md) {
  
      .slogan {display: none;}
  }
  
  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: @screen-lg) {}
  </code></pre>
  
  <p>Basically what happening is... nothing!</p>
  
  <p>I get those errors in Chrome:
  <a href="http://i.solidfiles.net/0d0ce2d2a7.png" rel="noreferrer">http://i.solidfiles.net/0d0ce2d2a7.png</a></p>
  
  <p>Any ideas?</p>