Centering the image in Bootstrap
Solution 1
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
Solution 2
.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.
Love Trivedi
I am India based Full Stack Javascript developer. I am having expertise in ReactJS, NodeJS, Express, Hapi, AngularJS. I love to work on Front-End using ReactJS, HTML5, CSS3 and JS
Updated on February 23, 2020Comments
-
Love Trivedi about 4 years
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>
-
Love Trivedi about 8 yearsThe <div> align attribute is not supported in HTML5.
-
stevec almost 3 yearsGreat explanation!