How do you get centered content using Twitter Bootstrap?
HtmlCssTwitter BootstrapHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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/
Solution 2 - Html
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
Solution 3 - Html
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/
Solution 4 - Html
Bootstrap 5 (update 2021)
Bootstrap 5 still uses flexbox grid layout, so centering works the same way.
text-center
to centerdisplay:inline
elements (ie: span, img)mx-auto
for centering inside flex elementsoffset-*
ormx-auto
can be used to center columns (.col-
)justify-content-center
to center columns (col-*
) insiderow
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 fordisplay:inline
elementscenter-block
to centerdisplay:block
elementscol-*offset-*
to center grid columns- see this answer to center the navbar
Demo Bootstrap 3 Horizontal Centering
Bootstrap 4
text-center
is still used fordisplay:inline
elementsmx-auto
replacescenter-block
to centerdisplay:block
elementsoffset-*
ormx-auto
can be used to center grid columnsjustify-content-center
inrow
can also be used to centercol-*
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>
Solution 5 - Html
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.
Solution 6 - Html
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.
Solution 7 - Html
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.
Solution 8 - Html
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/
Solution 9 - Html
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/
Solution 10 - Html
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>
Solution 11 - Html
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?
Solution 12 - Html
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>
Solution 13 - Html
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; }
Solution 14 - Html
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>
Solution 15 - Html
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-->
Solution 16 - Html
For Bootstrap version 3.1.1 and above, the best class for centering the content is the .center-block
helper class.
Solution 17 - Html
<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.
Solution 18 - Html
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.
Solution 19 - Html
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>
Solution 20 - Html
I created this class to keep the centered regardless of screen size while maintaining responsive features:
.container {
alignment-adjust: central;
}
Solution 21 - Html
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>
Solution 22 - Html
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.
Solution 23 - Html
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