Responsive Image Align Center Bootstrap 3

Responsive image align center bootstrap 3

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;
}

Bootstrap 3 center image

You are using class img-responsive which adds display:block to your image and can't be centered using text-align:center. You can center block elements of known width with margin:0 auto. Take a look at fiddle https://jsfiddle.net/DTcHh/9397/

How can I center an image in Bootstrap?

Image by default is displayed as inline-block, you need to display it as block in order to center it with .mx-auto. This can be done with built-in .d-block:

<div class="container">
    <div class="row">
        <div class="col-4">
            <img class="mx-auto d-block" src="...">  
        </div>
    </div>
</div>

Or leave it as inline-block and wrapped it in a div with .text-center:

<div class="container">
    <div class="row">
        <div class="col-4">
          <div class="text-center">
            <img src="..."> 
          </div>     
        </div>
    </div>
</div>

I made a fiddle showing both ways.
They are documented here as well.

Horizontally center a responsive image in Bootstrap

This is because .img-responsive class has its CSS display property set to block. Adding .img-responsive { display: inline-block; } in user stylesheet will solve the issue by overriding the original value and image will display as centred.

Here is CSS:

.img-responsive {
  display: inline-block;
}

Here is HTML:

<div class="col-sm-12 text-center">
  <img src="path/to/image.jpg" alt="Example image" class="img-responsive" />
</div>

How to align an image dead center with bootstrap

Twitter Bootstrap v3.0.3 has a class: center-block

Center content blocks

Set an element to display: block and center via margin. Available as a mixin and class.

Just need to add a class .center-block in the img tag, looks like this

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

In Bootstrap already has css style call .center-block

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

You can see a sample from here

Bootstrap responsive image will not stay in center

I found the answer to my question(s).

When adding the img-responsive class to the image it moves to the left. By adding "center-block" to the class to the image it should stay in the center.

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

Now I just need to find the answer on how to upscale my pictures to 200%.

EDIT:
I found the following to upscale my images:

CSS

.wrapper {
  width: 40%;
}

and added that to my image class.

HTML

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

And that fixed it.

---

Related Topics