Centering the image in Bootstrap

Question

I m using bootstrap 3.0 to creating a website. I am new to bootstrap. what i want, i want image in center of div when browser size is extra small i have this code.

<div class="col-lg-10 ccol-lg-offset-1 col-md-12 col-sm-12 ">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>

How do you know it's not working? You are using `class="img-responsive"` for image and it takes full width of the div. Try to remove this class and see what happens. — Morpheus, Oct 07 '13 at 08:26
i want img-responsive class to my html sir, i dont want to remove this class — Love Trivedi, Oct 07 '13 at 08:33
in this case your problem is not a problem as the image should take full width of your div. — Morpheus, Oct 07 '13 at 08:37
Note you don't need all those classes, using just `col-sm-2` will suffice — omma2289, Oct 07 '13 at 16:59

Carol Skelly · Accepted Answer · 2018-02-22T14:23:54.350

Update 2018

Bootstrap 2.x

You could create a new CSS class such as:

.img-center {margin:0 auto;}

And then, add this to each IMG:

 <img src="images/2.png" class="img-responsive img-center">

OR, just override the .img-responsive if you're going to center all images..

 .img-responsive {margin:0 auto;}

Demo: http://bootply.com/86123

Bootstrap 3.x

EDIT - With the release of Bootstrap 3.0.1, the center-block class can now be used without any additional CSS..

 <img src="images/2.png" class="img-responsive center-block">

Bootstrap 4

In Bootstrap 4, the mx-auto class (auto x-axis margins) can be used to center images that are display:block. However, img is display:inline by default so text-center can be used on the parent.

<div class="container">
    <div class="row">
        <div class="col-12">
            <img class="mx-auto d-block" src="//placehold.it/200">  
        </div>
    </div>
    <div class="row">
        <div class="col-12 text-center">
            <img src="//placehold.it/200">  
        </div>
    </div>
</div>

Bootsrap 4 - center image demo

score 1 · Answer 2 · answered Mar 17 '16 at 18:01

1

.img-responsive {
     margin: 0 auto;
 }

you can write like above code in your document so no need to add one another class in image tag.

answered Mar 17 '16 at 18:01

shiyani suresh

778
12
12

score -3 · Answer 3 · answered Apr 25 '16 at 06:13

-3

Use This as the solution

This worked for me perfectly..

<div align="center">
   <img src="">
</div>

answered Apr 25 '16 at 06:13

Akshay Shrivastav

19
1
10

2

The
align attribute is not supported in HTML5.
– Love Trivedi May 03 '16 at 16:59

Centering the image in Bootstrap

3 Answers3

Update 2018

Linked

Related