How do you get centered content using Twitter Bootstrap?

Question

I'm trying to follow a very basic example. Using the starter page and the grid system, I was hoping the following:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

...would produce centered text.

However, it still appears on the far left. What am I doing wrong?

do you want the text inside the '
' centered, or do you want the whole '
' div centered in the browser window? — NerdFury, Feb 07 '12 at 21:31
Update the link to http://twitter.github.com/bootstrap/scaffolding.html#gridSystem — Amol M Kulkarni, Feb 19 '13 at 09:15
@Chloe people who care about HTML compatibility. `` is deprecated in favor of `text-align: center` which, incidentally, is exactly what the bootstrap class `.text-center` wraps. — jmoss, Jun 04 '15 at 04:01
If you're using Bootstrap 4, see: https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment — Carol Skelly, Feb 27 '19 at 14:11

score 699 · Accepted Answer · edited May 23 '17 at 11:55

699

This is for Text Centering (which is what the question was about)

For other types of content, see Flavien's answer.

Update: Bootstrap 2.3.0+ Answer

The original answer was for an early version of bootstrap. As of bootstrap 2.3.0, you can simply give the div the class .text-center.

Original Answer (pre 2.3.0)

You need to define one of the two classes, row or span12 with a text-align: center. See http://jsfiddle.net/xKSUH/ or http://jsfiddle.net/xKSUH/1/

edited May 23 '17 at 11:55

Community

1
1

answered Feb 07 '12 at 21:43

ScottS

71,703
13
126
146

2

I've tried this for both row, and span12, but my table inside span12, inside row always sits left. Adding padding moves it to the center, but I want to center it in a responsive way. Can I do auto padding somehow? – ATSiem Apr 19 '12 at 15:38
I see that this is working but why should we need to define it.Are these not already defined?I am talking just about the text.... – Akshat Jiwan Sharma Sep 07 '12 at 17:45
@AkshatJiwanSharma--the classes are defined, but last I looked, the `text-align: center` is not default on those classes. Typically the default is going to be `left` alignment. – ScottS Sep 07 '12 at 22:27
for pre 2.3.0 the ```.pagination-centered``` also works :P saves you the keystroke of adding another class. – Sarim Apr 02 '14 at 19:35
@Sarim: Actually, `pagination-centered` requires you to add another class to the html. My pre-2.3.0 answer only requires one to expand the property definition of a class already there. Also, if you look at the comments on the answer using `pagination-centered`, you will find some objections and warnings related to that. But if it works for you in your case--go to it! :-) – ScottS Apr 02 '14 at 20:25
text-center in bootstrap 3, only works on small screens since .text-center is in a media query. – TechRemarker Jul 17 '14 at 13:00
@cchiera `.text-center` is in the [type.less](https://github.com/twbs/bootstrap/blob/master/less/type.less) file which should be importing in the main [bootstrap.less](https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less) file (unless you have some custom configuration that it is missing in). – ScottS Jul 17 '14 at 13:09
This is the .text-center { text-align: center; } in chrome inspector . It is easy as text-align property . and it works fine . – mercury Aug 27 '16 at 00:27

score 240 · Answer 2 · edited May 23 '17 at 12:10

240

NOTE: this was removed in Bootstrap 3.

Pre-Bootstrap 3, you could use the CSS class pagination-centered like this:

<div class="span12 pagination-centered">
    Centered content.
</div>

Class pagination-centered is already in bootstrap.css (or bootstrap.min.css) and has the only one rule:

.pagination-centered{text-align:center;}

With Bootstrap 2.3.0. just use class text-center

edited May 23 '17 at 12:10

Community

1
1

answered Jul 05 '12 at 09:42

Iurii.K

2,729
2
16
15

41

I wouldn't suggest using this as its very specific to pagination (as inferred from the classname). It may clash with styles you apply on pagination and may not be compatible with future updates if bootstrap decides that this class needs to do more for centered pagination. – epicwhale Sep 02 '12 at 20:26
4

@lurii.k This makes EVERYTHING centered, including children. WHat if we just want to align the outer container but have everything inside it align left? – gatzkerob Dec 14 '12 at 01:24
1

With bootstrap 2.3.0. just use css class .text-center – Iurii.K Feb 27 '13 at 15:19
Greatest answer so far! Work with bootstrap 2.3.2 – z1m.in Jun 29 '13 at 21:49
4

It appears that Bootstrap 3.0.0 has removed this class. Using `.text-center` on the parent is the correct solution for this version. – Blazemonger Oct 24 '13 at 21:22

score 155 · Answer 3 · edited Oct 28 '17 at 10:12

155

I guess most of the people here are actually searching for the way to center the whole div and not only the text content (which is trivial…).

The second way (instead of using text-align:center) to center things in HTML is to have an element with a fixed width and auto margin (left and right). With Bootstrap, the style defining auto margins is the "container" class.

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

Take a look here for a fiddle: http://jsfiddle.net/D2RLR/7788/

edited Oct 28 '17 at 10:12

Peter Mortensen

30,738
21
105
131

answered Oct 27 '12 at 10:10

Flavien Volken

19,196
12
100
133

9

This is the correct answer, as officially documented here: http://twitter.github.com/bootstrap/scaffolding.html#layouts – Qlimax Nov 22 '12 at 11:09
2

@Qlimax Your link seems to be broken, I think this is what you wanted for 2.3.2: http://getbootstrap.com/2.3.2/scaffolding.html#layouts – CLo Sep 18 '13 at 20:23
1

@Sebastialonso I just fixed the deprecated dependency, thank you for reporting the issue – Flavien Volken Feb 01 '15 at 09:23
This won't work if you want to center a column. To center grid column, use `col-*offset-*`. for example `
` or `
`
– sgon00 Feb 27 '19 at 13:59

Carol Skelly · Answer 4 · 2021-05-09T11:34:03.767

Bootstrap 5 (update 2021)

Bootstrap 5 still uses flexbox grid layout, so centering works the same way.

text-center to center display:inline elements (ie: span, img)
mx-auto for centering inside flex elements
offset-* or mx-auto can be used to center columns (.col-)
justify-content-center to center columns (col-*) inside row

Bootstrap 4

"Centered content" can mean many different things, and Bootstrap centering has changed a lot since the original post.

Horizontal Center

Bootstrap 3

text-center is used for display:inline elements
center-block to center display:block elements
col-*offset-* to center grid columns
see this answer to center the navbar

Demo Bootstrap 3 Horizontal Centering

Bootstrap 4

text-center is still used for display:inline elements
mx-auto replaces center-block to center display:block elements
offset-* or mx-auto can be used to center grid columns
justify-content-center in row can also be used to center col-*

mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.

Demo Bootstrap 4 Horizontal Centering

**Vertical Center** --

Now that Bootstrap 4 is flexbox by default there are many different approaches to vertical alignment using: auto-margins, flexbox utils, or the display utils along with vertical align utils. At first "vertical align utils" seems obvious but these only work with inline and table display elements. Here are some Bootstrap 4 vertical centering options..

1 - Vertical Center Using Auto Margins:

Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Vertical Center Using Auto Margins Demo

my-auto represents margins on the vertical y-axis and is equivalent to:

margin-top: auto;
margin-bottom: auto;

2 - Vertical Center with Flexbox:

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Vertical Center Different Height Columns Demo

3 - Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Vertical Center Using Display Utils Demo

When using Grid layout I found that only the following combination of css would horizontally & vertically align a div inside a column so that the maximum height of the column also matched the largest column in the same row. `.className-of-inner-div { display: inline-block; text-align: left; padding-top: 25%; padding-bottom: 20%; margin-top: auto; margin-bottom: auto; } .className-of-Grid-column { vertical-align:middle; text-align: center; }` — user3188040, Apr 12 '17 at 08:05
I'd upvote for each demo if I could. They're great. :) Thanks a lot! — Pascal, Dec 05 '19 at 16:24

score 36 · Answer 5 · answered May 22 '14 at 12:24

Bootstrap 3.1.1 has a .center-block class for centering divs. See: http://getbootstrap.com/css/#helper-classes-center.

Center content blocks Set an element to display: block and center via margin. Available as a mixin and class.

<div class="center-block">...</div>

Or, as others have already said, use the .text-center class to centre text.

score 29 · Answer 6 · edited Dec 27 '12 at 15:11

The best way to do this is define a css style:

.centered-text {
    text-align:center
}

Then where ever you need centered text you add it like so:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

or if you just want the p tag centered:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

The less inline css you use the better.

Good one, I used this to center the buttons in a Bootstrap Modal footer. — Giant Elk, Aug 26 '14 at 03:36

score 14 · Answer 7 · answered Feb 07 '12 at 21:37

14

The class .show-grid is applying center aligned text in the example in the link.

You can always add style="text-align:center" to your row div or some other class I would think.

answered Feb 07 '12 at 21:37

PAULDAWG

780
5
21

4

adding inline styles like this is often considered bad practice – Spencer Williams Jun 29 '12 at 01:14
2

I agree, and that's why I also said "or some other class" :) – PAULDAWG Jun 29 '12 at 17:03

score 12 · Answer 8 · answered Feb 26 '13 at 08:34

As of February 2013, in some cases, I add a "centred" class to the "span" div:

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

and to CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

The reason for this is because the span* div's get floated to the left, and the "auto margin" centering technique works only if the div is not floated.

Demo (on JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/

This is the best answer because it the div is centered and it is still responsive. Here is a fiddle for the demo. The one in the answer doesn't work: http://jsfiddle.net/r7Qgn/6/ — Rafi, Jun 13 '14 at 14:11

score 9 · Answer 9 · edited Oct 28 '17 at 10:26

9

If you use Bootstrap 3, it also has built-in CSS class named .text-center. That's what you want.

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

Please see the example in jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/

edited Oct 28 '17 at 10:26

Peter Mortensen

30,738
21
105
131

answered Oct 24 '13 at 02:26

Stanley Wang

1,154
10
13

score 8 · Answer 10 · answered Feb 14 '13 at 17:18

8

Bootstrap 2.3 has a text-center class.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

answered Feb 14 '13 at 17:18

leonbloy

73,180
20
142
190

No, that's work only for text, the question is about the main container – fractefactos Jun 04 '16 at 21:25
"the question is about the main container" I don't see why you claim that (and see the accepted answer) – leonbloy Jun 05 '16 at 02:27

score 5 · Answer 11 · edited Apr 04 '13 at 16:29

5

On my side I define new CSS styles ready to use and easy to remember:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

Is it a good idea? Is there any good practice for this?

edited Apr 04 '13 at 16:29

Elmo

6,409
16
72
140

answered Aug 27 '12 at 18:33

Parisiam

59
1
1

3

slippery slope. css is supposed to remove styling concerns from the document structure. These, albeit indirectly, add them back. Maybe TBS sets a bad example with their `span12`s and the like – willscripted Nov 15 '12 at 22:54
I agree with the slippery slope comment. I'd also add that the use of Twitter Bootstrap itself is arguably a slippery slope. – Jason Swett Aug 09 '16 at 19:46

score 4 · Answer 12 · answered Jun 13 '12 at 09:52

4

If you are using Bootstrap 2.0+

This can make the div centered to the page.

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

answered Jun 13 '12 at 09:52

Sandeep

2,041
21
34

11

this does not center the element. it puts the upper left corner of the element to 4 columns forward. centering means putting the exact center of the element to the center of the container element. – Cagatay Kalan Aug 17 '12 at 01:52

nathanjessen · Answer 13 · 2017-01-18T09:07:12.060

3

Any text-align utility class would do the trick. Bootstrap has been using .text-center class for centering text for a long time now.

.text-center { text-align: center !important; }

Or you can create your own utilities. Some variations I've seen over the years:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

edited Jan 18 '17 at 09:07

answered Jun 28 '12 at 04:12

nathanjessen

1,008
8
8

3

Not a good design since pull-left and pull-right effects the element given the class. pull-center as you define, effects the childs of the element. – Cagatay Kalan Aug 17 '12 at 01:50

score 3 · Answer 14 · edited Oct 28 '17 at 10:11

You need to adjust with the .span.

Example:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"></div>
    <!--/span-->
    <div class="span4" align="center">
      <div class="hero-unit" align="center">
        <h3>Sign In</h3>
        <form>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i> </span>
            <input class="span6" type="text" placeholder="Email address">
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-key"></i> </span>
            <input class="span6" type="password" placeholder="Password">
          </div>
        </form>
      </div>
    </div>
    <!-- /span -->
    <div class="span4"></div>
  </div>
  <!-- /row -->
</div>

score 2 · Answer 15 · answered Sep 12 '12 at 09:47

My preferred method for centering blocks of information while maintaining responsiveness (mobile compatibility) is to place two empty span1 divs before and after the content you wish to center.

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->

score 2 · Answer 16 · edited Oct 28 '17 at 10:26

2

For Bootstrap version 3.1.1 and above, the best class for centering the content is the .center-block helper class.

edited Oct 28 '17 at 10:26

Peter Mortensen

30,738
21
105
131

answered Nov 28 '15 at 10:17

Shwan Namiq

631
8
21

yes it is wright now very themes and users use bootstrap versions greater than 3.1.1 – SAFEEN 1990 Sep 30 '16 at 10:21

score 1 · Answer 17 · edited Oct 28 '17 at 10:27

1

<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

Do not use container-fluid in the main.

edited Oct 28 '17 at 10:27

Peter Mortensen

30,738
21
105
131

answered May 27 '16 at 22:05

Talha

1,546
17
15

You have a `centered` class in your code that will create a lot of confusion – bg17aw Jul 21 '16 at 13:05
interesting approach, but for my particular webform css, this was a good option. – JoshYates1980 Oct 19 '17 at 19:37

score 1 · Answer 18 · edited Oct 28 '17 at 10:38

Center-block is also an option not referred in above answers

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from, so it will not center itself as anticipated.

So text-center is a better option.

score 1 · Answer 19 · edited Oct 28 '17 at 10:38

1

You can use any one of the below types

Use the Bootstrap existing class text-center.
Adding a custom style, style = "text-align:center".
Use a column offset:

Example: <div class="col-md-offset-6 col-md-12"></div>

edited Oct 28 '17 at 10:38

Peter Mortensen

30,738
21
105
131

answered May 22 '17 at 12:21

Poorna Rao

335
4
20

score 0 · Answer 20 · edited Jul 08 '14 at 05:49

0

I created this class to keep the centered regardless of screen size while maintaining responsive features:

.container {
    alignment-adjust: central;
}

edited Jul 08 '14 at 05:49

alex

479,566
201
878
984

answered Aug 01 '13 at 14:58

Ariel

9
1

score 0 · Answer 21 · edited Oct 28 '17 at 10:40

0

Simply use a class, text-center, for the div or tag which you want. I think it may work fine. It is a Bootstrap class for text align center.

Here are some text alignment Bootstrap classes:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

edited Oct 28 '17 at 10:40

Peter Mortensen

30,738
21
105
131

answered Jul 07 '17 at 09:13

shiva krishna

222
2
11

score 0 · Answer 22 · edited Oct 28 '17 at 10:42

I tried two ways, and it worked fine to center the div. Both the ways will align the divs on all screens.

Way 1: Using Push:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

Way 2: Using Offset:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

Result:

Explanation

Bootstrap will designate to the left, the first column of the specified screen-occupancy. If we use offset or push it will shift the 'this' column by 'those' many columns. Though I faced some issues in responsiveness of offset, push was awesome.

score 0 · Answer 23 · edited Nov 25 '18 at 00:48

0

Update 2018:

In Bootstrap 4.1.3, content can be centered using class mx-auto.

<div class="mx-auto">
  Centered element
</div>

Reference: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering

edited Nov 25 '18 at 00:48

Jens

8,423
9
58
78

answered Nov 02 '18 at 14:10

LinuxUser

635
1
7
19

score 0 · Answer 24 · answered Jul 24 '22 at 15:57

Adding an answer. Hope it helps someone

<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12">
    <div class='d-flex flex-row justify-content-center'>
      <img     
        className='img-fluid'       
        src="<url>"
          />
    </div>
    </div>
</div>

How do you get centered content using Twitter Bootstrap?

24 Answers24

This is for Text Centering (which is what the question was about)

Bootstrap 5 (update 2021)

Bootstrap 4

Linked

Related