Responsive image align center bootstrap 3

Question

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I want to put the image in the center of the screen, but for some reason I can not. Who be will help solve the problem?

Solution 1

If you're using Bootstrap v3.0.1 or greater, you should use this solution instead. It doesn't override Bootstrap's styles with custom CSS, but instead uses a Bootstrap feature.

My original answer is shown below for posterity

---

This is a pleasantly easy fix. Because .img-responsive from Bootstrap already sets display: block, you can use margin: 0 auto to center the image:

.product .img-responsive {
    margin: 0 auto;
}

Solution 2

There is .center-block class in Twitter Bootstrap 3 (Since v3.0.1), so use:

<img src="..." alt="..." class="img-responsive center-block" />

Solution 3

Add only the class center-block to an image, this works with Bootstrap 4 as well:

<img src="..." alt="..." class="center-block" />

Note: center-block works even when img-responsive is used

Solution 4

Just use .text-center class if you're using Bootstrap 3.

<div class="text-center">
    <img src="..." alt="..."/>
</div>

Note: This doesn't work with img-responsive

Solution 5

This should center the image and make it responsive.

<img src="..." class="img-responsive" style="margin:0 auto;"/>

View more solutions

Comments

[Bojangles]

Why display: table? It's already display: block which is enough to get margin: 0 auto to work

[knite]

It's probably better to create a new class with margin: 0 auto, rather than changing .img-responsive.

[Bojangles]

That's a thought, although personally I can't think of anywhere I'd want a responsive image not centered, especially with this design. It all depends on the use case, and what's going to happen in the future

[user2602152]

This should be the accepted answer, as you do not need to add any CSS to use it.

[mxro]

class="img-responsive" style="margin: 0 auto;" works for me class="img-responsive center-block" does not (bootstrap 3, but a version a few month old)

[Ismael]

Align center does not work when img-responsive is used.

[user137717]

@DHlavaty can you explain the difference between using .img-responsive AND .center-block and just using .img-responsive with an auto margin like the accepted answer suggests? is one method more robust?

[Alexey Kosov]

The question is about img-responsive

[DardanM]

For img-responsive add img-center (tested on 3.3.6) for those that might see this on google searches

[Baumannzone]

Best response, but underrated. That's why you use a framework!

[Glenn Plas]

This answer is under appreciated, wrapping the image in the row class is crucial in centering the image when there is a text under the image.

[AndrewLeonardi]

So. Fantastic. Thank you

[CXJ]

You might not want to use this if your image is supposed to be clickable. That is, if it is wrapped inside a <a href="#"> </a> pair, the clickable area will get expanded to the full width of the enclosing container which might be quite a bit larger than your image. This may confuse users who click on what they think is "empty" space.

[Dhiren Patel]

Its Work..Thanks

[snorberhuis]

Please see this answer if you are using Bootstrap v4 or higher: stackoverflow.com/a/43293957/4102515