How to center a column in Bootstrap framework? Just started to study. Sample code.

<div class="container"> <div class="row"> <div class="col-md-4 col-sm-12 col-xs-12 my-col"> <img src="img/1.jpg" alt="image1" class="img-responsive" /> </div> <div class="col-md-4 col-sm-12 col-xs-12 my-col"> <img src="img/2.jpg" alt="image2" class="img-responsive" /> </div> <div class="col-md-4 col-sm-12 col-xs-12 my-col"> <img src="img/3.jpg" alt="image3" class="img-responsive" /> </div> </div> </div>

Here the three columns are aligned well.

enter image description here

Here one column is left justified. How to align it in the center? Is there a tool in the Bootstrap framework?

enter image description here

  • column or content? - cyadvert
  • Are the columns or contents aligned on the first picture? Probably speakers. - Sergey
  • sarcasm? with such a question? :) it's fun :) :) :) The code you provided shows the first picture. The second picture can be either if the code is changed (then show it), or if the screen size ... In general, what did between the two pictures? Still can the style .my-col affect. He would see him too ... - cyadvert
  • Dear cyadvert, on the second picture the screen size is naturally changed. In the col-sm-12 code, when the screen changes, the three columns become one. This one column is not in the center of the screen. - Sergey
  • .my-col { margin-bottom: 15px; } .my-col { margin-bottom: 15px; } - Sergey

1 answer 1

Edit / note (Dec. 2018) - the code below works for Bootstrap 3.
Bootstrap 4 has other classes.

Use this HTML here (added .text-center class)

 <div class="container"> <div class="row"> <div class="col-md-4 col-sm-12 col-xs-12 my-col text-center"> <img src="img/1.jpg" alt="image1" class="img-responsive" /> </div> <div class="col-md-4 col-sm-12 col-xs-12 my-col text-center"> <img src="img/2.jpg" alt="image2" class="img-responsive" /> </div> <div class="col-md-4 col-sm-12 col-xs-12 my-col text-center"> <img src="img/3.jpg" alt="image3" class="img-responsive" /> </div> </div> </div>

And change the display attribute in the pictures

 .my-col .img-responsive { display: inline-block; }
  • Dear cyadvert, added text-center, all the same. - Sergey
  • Dear cyadvert! Thank you very much. It is enough to do so .img-responsive { display: inline-block; } .img-responsive { display: inline-block; } But I thought that Bootstrap has some kind of special class or it will automatically align itself, for example, like on a singing photo. He somehow aligns the three columns. Thanks again! - Sergey
  • if it worked, then to close the question, put an arrow and a check mark on the answer - cyadvert