Intellipaat Back

Explore Courses Blog Tutorials Interview Questions
0 votes
in Web Technology by (20.3k points)

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?

1 Answer

0 votes
by (40.7k points)

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.

Browse Categories