How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3.
Please see the starter fiddle.
<body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body>
So, 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 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 == one column).