Center a column using Twitter Bootstrap 3

by

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3?

.centered {
  background-color: red;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="https://stackoverflow.com/questions/18153234/holder.js/100x100" alt="" />
  </div>
</body>

I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple divs, but for now I just want a div with the size of one column centered within the container (12 columns).

I am also not sure the above approach is good enough as the intention is not to offset the div by half. I do not need free spaces outside the div and the contents of the div shrink in proportion. I want to empty space outside the div to be evenly distributed (shrink till the container width is equal to one column).

3
34

Leave a Comment