Using uneven offsets for centering content in Bootstrap - css

Question

Using Bootstrap 3, I'm trying to center a image on its own row. Here is what I have, which responds well across display sizes:
<div class="row">
<div class="col-lg-2 col-lg-offset-5 col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3 text-center">
<img src="img.jpg" class="img-responsive">
</div>
</div>
However, .img-responsive sets max-width: 100%. The image is too large on some displays. For example, I'd rather have col-lg-1 than col-lg-2.
Obviously, I could do col-lg-1 col-lg-offset-5 but the content will be off-center.
Is there an equivalent to col-lg-1 col-lg-offset-5.5, or some other method to center content in this scenario?

Answer 1

I would say no by default. But It can be possible with Bootstrap customize then you can define your custom responsive grid column with #grid-columns. You can specify 16.
<div class="row">
<div class="col-lg-2 col-lg-offset-7 text-center">
<img src="img.jpg" class="img-responsive">
</div>
</div>
Or you can just style your image to be smaller width.
<div class="row">
<div class="col-lg-2 col-lg-offset-5 col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3 text-center">
<img src="img.jpg" class="img-resize img-responsive">
</div>
</div>
<style type="text/css">
.img-resize {
width: 200px;
}
</style>