title: Horizontally centered Bootstrap columns
body: <p><strong><a href="https://jsfiddle.net/kirandash/4cay7537/" rel="nofollow noreferrer">JSFIDDLE</a></strong></p>
  
  <p>I have a case where I want my bootstrap columns to horizontally center themselves.</p>
  
  <p>To achieve this, I have used the following rules</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>div[class^=col-] {
    float: none;/* Overwrites float left */
    display: inline-block;
    vertical-align: top;
    width: 25%;
  } 
  </code></pre>
  
  <p>Then If 4 columns are there they should come in a line. And if there are 3 columns then they should be centered.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!-- The fourth column falls down --&gt;
  &lt;div class='row text-center'&gt;
      &lt;div class="col-xs-3 col-1"&gt;Hi&lt;/div&gt;
      &lt;div class="col-xs-3 col-2"&gt;Hi&lt;/div&gt;
      &lt;div class="col-xs-3 col-2"&gt;Hi&lt;/div&gt;
      &lt;div class="col-xs-3 col-2"&gt;Hi&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Works Fine and centers the columns --&gt;    
  &lt;div class='row text-center'&gt;
      &lt;div class="col-xs-3 col-1"&gt;Hi&lt;/div&gt;
      &lt;div class="col-xs-3 col-2"&gt;Hi&lt;/div&gt;
      &lt;div class="col-xs-3 col-2"&gt;Hi&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It works fine if I have just 1,2 or 3 columns but when I get 4 columns, one of the columns falls down to a new line. To solve this issue, I have tried reducing the width to say <code>24.7%</code>. But again this does not work in all screens. So I have to keep changing the width.</p>
  
  <p>I would love to know why width <code>25%</code> is not taking the <code>25%</code> width and falling down. And how to solve this issue and keep them always in the center.</p>
  
  <p><strong><a href="https://jsfiddle.net/kirandash/4cay7537/" rel="nofollow noreferrer">JSFIDDLE</a></strong></p>