title: Center a column using Twitter Bootstrap 3
body: <p>How do I center a div of one column size within the container (12 columns) in <a href="https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29" rel="noreferrer">Twitter Bootstrap 3</a>?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.centered {
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  &lt;body class="container"&gt;
    &lt;div class="col-lg-1 col-offset-6 centered"&gt;
      &lt;img data-src="holder.js/100x100" alt="" /&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want a <code>div</code>, with a class <code>.centered</code> to be centered within the container. I may use a row if there are multiple <code>div</code>s, but for now I just want a <code>div</code> with the size of one column centered within the container (12 columns).</p>
  <p>I am also not sure the above approach is good enough as the intention is not to offset the <code>div</code> by half. I do not need free spaces outside the <code>div</code> and the contents of the <code>div</code> shrink in proportion. I want to <strong>empty space outside the div to be evenly distributed</strong> (shrink till the container width is equal to one column).</p>