How to center content in Bootstrap column?

Question

I'm trying to center the contents of a column. Doesn't look like it works for me. This is my HTML:

<div class="row">
   <div class="col-xs-1 center-block">
       <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

JSFiddle Demo

Answer 1

[Updated April 2022]: Tested and included version 5.1 of Bootstrap.

---

I know this question is quite old. And the question didn't mention which version of Bootstrap he was using. So I assume the answer to this question is already solved.

If any of you (like me) stumble upon this question and are looking for an answer using the current bootstrap 5.0 (2020) and 4.5 (2019) framework, here is the solution.

Bootstrap 4.5, 5.0 and 5.1

Use d-flex justify-content-center on the column div. This will center everything in that column.

<div class="row">
    <div class="col-4 d-flex justify-content-center">
        <!-- Image -->
    </div>
</div>

If you want to align text within a column, just use text-center

<div class="row">
    <div class="col-4 text-center">
        <!-- text only -->
    </div>
</div>

If you have text and images in the column, you need to use d-flex justify-content-center and text-center .

<div class="row">
    <div class="col-4 d-flex justify-content-center text-center">
       <!-- for image and text -->
    </div>
</div>

Answer 2

use:

<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

instead of

<div class="col-xs-1 center-block">

You can also use bootstrap 3 css:

<!-- recommended method -->
<div class="col-xs-1 text-center">

Bootstrap 4 now has a Flex class for centering content:

<div class="d-flex justify-content-center">
   <div>some content</div>
</div>

Please note that by default it will be x-axis unless flex-direction is column