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    lt div class  col-lg-10 ccol-lg-offset-1 col-md-12 col-sm-12   gt       lt div class  col-lg-2 col-md-2 col-sm-2 col-xs-12  gt           lt img src  images 2 png  class  img-responsive    gt           lt p class  text-center  gt  lt a href  javascript void 0    gt Taj Group lt  a gt  lt  p gt       lt  div gt       lt div class  col-lg-2  col-md-2 col-sm-2 col-xs-12  gt           lt img src  images 2 png  class  img-responsive    gt           lt p class  text-center  gt  lt a href  javascript void 0    gt Taj Group lt  a gt  lt  p gt       lt  div gt       lt div class  col-lg-2  col-md-2 col-sm-2 col-xs-12  gt           lt img src  images 2 png  class  img-responsive    gt           lt p class  text-center  gt  lt a href  javascript void 0    gt Taj Group lt  a gt  lt  p gt       lt  div gt       lt div class  col-lg-2  col-md-2 col-sm-2 col-xs-12  gt           lt img src  images 2 png  class  img-responsive    gt           lt p class  text-center  gt  lt a href  javascript void 0    gt Taj Group lt  a gt  lt  p gt       lt  div gt       lt div class  col-lg-2 col-md-2 col-sm-2 col-xs-12  gt           lt img src  images 2 png  class  img-responsive    gt           lt p class  text-center  gt  lt a href  javascript void 0    gt Taj Group lt  a gt  lt  p gt       lt  div gt       lt div class  col-lg-2 col-md-2 col-sm-2 col-xs-12  gt           lt img src  images 2 png  class  img-responsive    gt           lt p class  text-center  gt  lt a href  javascript void 0    gt Taj Group lt  a gt  lt  p gt       lt  div gt

User · Answer

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

User · Answer

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     lt img src  images 2 png  class  img-responsive img-center  gt    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      lt img src  images 2 png  class  img-responsive center-block  gt      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    lt div class  container  gt       lt div class  row  gt           lt div class  col-12  gt               lt img class  mx-auto d-block  src    placehold it 200  gt             lt  div gt       lt  div gt       lt div class  row  gt           lt div class  col-12 text-center  gt               lt img src    placehold it 200  gt             lt  div gt       lt  div gt   lt  div gt    Bootsrap 4 - center image demo

User · Answer

Use This as the solution  This worked for me perfectly     lt div align  center  gt      lt img src    gt   lt  div gt

[css] Centering the image in Bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to bootstrap-4