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?

Answer 1

If you're working on Bootstrap v3.0.1 or greater, use the code given below:

Here, .img-responsive from Bootstrap already sets display: block, you can use margin: 0 auto to center the image like this:

.product .img-responsive {

    margin: 0 auto;

}

Note: It doesn't override Bootstrap's styles with custom CSS, but instead it uses a Bootstrap feature.