Bootstrap - How to center div that has text inside it?

Question

I want to be able to center the div that contains the text below in the middle of the page. I though I would be able to use the 'center-block' class in bootstrap but it doesn't seem to work:

Live preview: http://codepen.io/anon/pen/tCIlG

Code below:

 <div class="row">
      <div class="col-md-4 center-block text-center">

        I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.

      </div>
    </div>

possible duplicate of [How to horizontally center a div in a div?](http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-a-div) — Sasa, Oct 30 '14 at 22:37

score 2 · Accepted Answer · answered Oct 30 '14 at 22:36

2

The .col-md-4 class is causing it to float left instead of center. If you want to keep the width from that class, you can override it in CSS:

.col-md-4.center-block {
    float: none;
}

Updated codepen: http://codepen.io/sdsanders/pen/lHrvu

answered Oct 30 '14 at 22:36

Steve Sanders

8,444
2
30
32

Thank you, that was easy. Is using the column method the best way to achieve what I am trying to do? Or is there a better way to do it that doesn't involve having to add in separate css etc? – ifusion Oct 30 '14 at 22:40
1

@ifusion Matt's answer above is another option that doesn't require writing any CSS. – Steve Sanders Oct 30 '14 at 22:43
you probably want to avoid hacking the bootstrap grid, just offset it as below – Matt Lambert Oct 31 '14 at 22:52

score 2 · Answer 2 · answered Oct 30 '14 at 22:42

here you go

<div class="row">
      <div class="col-md-4 col-md-offset-4">

        I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.

      </div>
    </div>

Bootstrap - How to center div that has text inside it?

2 Answers2