title: How to set up different widths for the media breakpoints in Bootstrap
body: <p>I am pretty new to Bootstrap, so please bear with me. I am trying to set up my CSS for an internal web application I am creating. I have it working perfectly with a default bootstrap.css. However the default screen width are not what is needed as it will be used a lot of very high resolution monitors (as well as tables and possibly phones).</p>
  
  <p>So what I am trying to do is compile my own bootstrap.css that has some new media break values in.</p>
  
  <p>Current</p>
  
  <pre><code>xs = 480px
  sm = 768px
  md = 992px
  lg = 1200px
  </code></pre>
  
  <p>What I want is</p>
  
  <pre><code>xs = 480px
  sm = 992px
  md = 1200px
  lg = 1600px
  </code></pre>
  
  <p>or even better would be</p>
  
  <pre><code>xs = 480px
  sm = 768px
  md = 992px
  lg = 1200px
  xl = 1600px
  </code></pre>
  
  <p>However I cannot get this working. I enter the required values in the template, but the css it produces does not scale properly, it does not jump between the small and medium sizes properly.</p>
  
  <p><img src="https://i.stack.imgur.com/VY8TG.png" alt="Bootstrap template"></p>
  
  <p>Cheers Mike</p>