title: How to center a col-xs-12 in bootstrap?
body: <p>I am having trouble centering the columns on bootstrap when the screen is <code>sm</code> or <code>xs</code>. </p>
  
  <p>The fiddle is here <a href="https://jsfiddle.net/iggyfiddle/DTcHh/34028/" rel="nofollow noreferrer">https://jsfiddle.net/iggyfiddle/DTcHh/34028/</a>. Here is what I am talking about:</p>
  
  <p><a href="https://i.stack.imgur.com/LlDzc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LlDzc.png" alt="large or medium screen"></a>
  When the screen is large (or medium), I have no problem. It <em>appears</em> centered.</p>
  
  <p><a href="https://i.stack.imgur.com/jznxD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jznxD.png" alt="small screen"></a>
  When the screen starts to get smaller, it starts to become noticeable. If you notice, the whole column stack leans to the left, leaving some space on the right (I added red bg for emphasis. Hard to tell when bg is white).</p>
  
  <p><a href="https://i.stack.imgur.com/1ciom.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1ciom.png" alt="xs screen"></a>
  When screen is xs, it is even more noticeable. Note that everything is leaning to the left, leaving a lot of space on the right. </p>
  
  <p>I saw a popular SO post that addressed similar issue <a href="https://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3">here</a>. The solution suggested     <code>float: none; margin: 0 auto;</code>, which I did - but it didn't do anything. I also tried adding <code>center-block</code> class, but the result is still nothing. </p>
  
  <p>What do I have to do to center my columns? My goal is on xs screen, I want to have one column stacked up. When it is on sm screen, I want to have two columns, side-by-side, stacked. Anything larger should have 4 adjacent columns.</p>