73

A simple use case scenario is to use an image, or any other content inside a Bootstrap column. And often this content needs to be horizontally centered.

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 text-center">
            <img class="img-responsive" src="img/some-image.png" title="this image needs to be centered">
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8">
            some content not important at this moment
        </div>
    </div>
</div>

In version 3.1.0 adding class text-center centered the image inside column. But I was forced to go to version 3.3.4 in order to fix some other issues and this behavior (text-center) is now broken. I am left with the problem how to center an image or other content inside a column. I would like to avoid having to add class to contained elements as this is error prone or requires another containing div.

animuson
  • 53,861
  • 28
  • 137
  • 147
f470071
  • 1,527
  • 3
  • 18
  • 30

2 Answers2

89

Want to center an image? Very easy, Bootstrap comes with two classes, .center-block and text-center.

Use the former in the case of your image being a BLOCK element, for example, adding img-responsive class to your img makes the img a block element. You should know this if you know how to navigate in the web console and see applied styles to an element.

Don't want to use a class? No problem, here is the CSS bootstrap uses. You can make a custom class or write a CSS rule for the element to match the Bootstrap class. 

 // In case you're dealing with a block element apply this to the element itself 
.center-block {
   margin-left:auto;
   margin-right:auto;
   display:block;
}

// In case you're dealing with a inline element apply this to the parent 
.text-center {
   text-align:center
}
ChesuCR
  • 9,352
  • 5
  • 51
  • 114
Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174
  • 2
    center-block must be apllied to img or content. Which means in generic case to add yet another div. Which is bad. Changing the document just to cover deffincies in styling. text-center does not work anymore in v3.3.4 – f470071 May 29 '15 at 12:12
  • 1
    you don't add a additional element you just PICK the closest parent element ! – Alexander Solonik May 29 '15 at 12:56
  • I'm doing this right now and the parent element for my anchor control, a div with various col settings and its not working... I agree, I should not have to add a div, just to force the formatting I need to cover for bootstrap – Clarence Jun 30 '17 at 23:02
  • I was trying to center an image in a row and I needed to place the class="center-block" inside the image div, not the row div. – guero64 Aug 09 '17 at 22:56
47

You can do this by adding a div i.e. centerBlock. And give this property in CSS to center the image or any content. Here is the code:

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4">
            <div class="centerBlock">
                <img class="img-responsive" src="img/some-image.png" title="This image needs to be centered">
            </div>
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8">
            Some content not important at this moment
        </div>
    </div>
</div>


// CSS

.centerBlock {
  display: table;
  margin: auto;
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ahmad Sharif
  • 4,141
  • 5
  • 37
  • 49