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    x000D   x000D   lt div class  row  gt  x000D     lt div class  span12  gt  x000D       lt h1 gt Bootstrap starter template lt  h1 gt  x000D       lt p gt Example text  lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D       would produce centered text   However  it still appears on the far left  What am I doing wrong

User · Answer

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   lt div class  row  gt    lt div class  col-md-12 text-center  gt     lt h1 gt Bootstrap starter template lt  h1 gt     lt p gt Example text  lt  p gt    lt  div gt   lt  div gt

User · Answer

If you use Bootstrap 3  it also has built-in CSS class named  text-center  That s what you want    lt div class  text-left  gt      left  lt  div gt    lt div class  text-center  gt      center  lt  div gt    lt div class  text-right  gt      right  lt  div gt    Please see the example in jsfiddle  http   jsfiddle net ucheng Q4Fue

User · Answer

lt div class  container  gt     lt div class  col-md-12 centered  gt       lt div class  row  gt         lt div class  col-md-1  gt  lt  div gt          lt div class  col-md-10  gt             label         lt  div gt         lt div class  col-md-1  gt  lt  div gt       lt  div gt     lt  div gt   lt  div gt    Do not use container-fluid in the main

User · Answer

I created this class to keep the  centered regardless of screen size while maintaining responsive features    container       alignment-adjust  central

User · Answer

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    lt 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  gt       lt h2 gt Grievance form lt  h2 gt   lt  -- To center this text  use style  text-align  center  -- gt     lt  div gt    Way 2  Using Offset    lt 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  gt       lt h2 gt Grievance form lt  h2 gt   lt  --to center this text  use style  text-align  center -- gt   lt  div gt    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

User · Answer

As of February 2013  in some cases  I add a  centred  class to the  span  div    lt div class  container  gt     lt div class  row  gt       lt div class  span9 centred  gt        This div will be centred       lt  div gt     lt  div gt   lt  div gt    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

User · Answer

Update 2019 - 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    lt div class  row h-100  gt       lt div class  col-sm-12 my-auto  gt           lt div class  card card-block w-25  gt Card lt  div gt       lt  div gt   lt  div gt    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             lt div class  row  gt              lt div class  col-6 align-self-center  gt                   lt div class  card card-block  gt                   Center                  lt  div gt              lt  div gt              lt div class  col-6  gt                   lt div class  card card-inverse card-danger  gt                      Taller                  lt  div gt             lt  div gt       lt  div gt    or  use align-items-center on the entire  row to vertically center align all col-  in the row             lt div class  row align-items-center  gt              lt div class  col-6  gt                   lt div class  card card-block  gt                   Center                  lt  div gt              lt  div gt              lt div class  col-6  gt                   lt div class  card card-inverse card-danger  gt                      Taller                  lt  div gt             lt  div gt       lt  div gt    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    lt div class  row h-50  gt       lt div class  col-sm-12 h-100 d-table  gt           lt div class  card card-block d-table-cell align-middle  gt              I am centered vertically          lt  div gt       lt  div gt   lt  div gt    Vertical Center Using Display Utils Demo

User · Answer

Bootstrap 2 3 has a text-center class     lt p class  text-left  gt Left aligned text  lt  p gt   lt p class  text-center  gt Center aligned text  lt  p gt   lt p class  text-right  gt Right aligned text  lt  p gt

User · Answer

Update 2018   In Bootstrap 4 1 3  content can be centered using class mx-auto    lt div class  mx-auto  gt    Centered element  lt  div gt    Reference  https   getbootstrap com docs 4 1 utilities spacing  horizontal-centering

User · Answer

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     - gt  similar to  pull-left already existing in bootstrap    fright   float  right      - gt  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

User · Answer

NOTE  this was removed in Bootstrap 3     Pre-Bootstrap 3  you could use the CSS class pagination-centered like this    lt div class  span12 pagination-centered  gt      Centered content   lt  div gt    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

User · Answer

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   lt div class  col-md-offset-6 col-md-12  gt  lt  div gt

User · Answer

If you are using Bootstrap 2 0   This can make the div centered to the page    lt div class  row  gt       lt div class  span4 offset4  gt            your content here gets centered of the page      lt  div gt   lt  div gt

User · Answer

You need to adjust with the  span   Example    lt div class  container-fluid  gt     lt div class  row-fluid  gt       lt div class  span4  gt  lt  div gt       lt  -- span-- gt       lt div class  span4  align  center  gt         lt div class  hero-unit  align  center  gt           lt h3 gt Sign In lt  h3 gt           lt form gt             lt div class  input-prepend  gt               lt span class  add-on  gt  lt i class  icon-envelope  gt  lt  i gt   lt  span gt               lt input class  span6  type  text  placeholder  Email address  gt             lt  div gt             lt div class  input-prepend  gt               lt span class  add-on  gt  lt i class  icon-key  gt  lt  i gt   lt  span gt               lt input class  span6  type  password  placeholder  Password  gt             lt  div gt           lt  form gt         lt  div gt       lt  div gt       lt  --  span -- gt       lt div class  span4  gt  lt  div gt     lt  div gt     lt  --  row -- gt   lt  div gt

User · Answer

Center-block is also an option not referred in above answers       lt div class  center-block  style  width 200px background-color  ccc   gt     lt  div gt      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

User · Answer

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    lt div class  row  gt       lt div class  span12 centered-text  gt           lt h1 gt Bootstrap starter template lt  h1 gt           lt p gt Use this document as a way to quick start any new project  lt br gt  All you get is this message and a barebones HTML document  lt  p gt       lt  div gt   lt  div gt    or if you just want the p tag centered    lt div class  row  gt       lt div class  span12 centered-text  gt           lt h1 gt Bootstrap starter template lt  h1 gt           lt p class  centered-text  gt Use this document as a way to quick start any new project  lt br gt  All you get is this message and a barebones HTML document  lt  p gt       lt  div gt   lt  div gt    The less inline css you use the better

User · Answer

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        lt div class  center-block  gt     lt  div gt    Or  as others have already said  use the  text-center class to centre text

User · Answer

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    lt div class  row-fluid  gt        lt div class  span1  gt       lt  div gt            lt div class  span10  gt             lt div class  hero-unit  gt               lt h1 gt Reading Resources lt  h1 gt               lt p gt Read here    lt  p gt             lt  div gt           lt  div gt  lt  -- span-- gt        lt div class  span1  gt       lt  div gt    lt  div gt  lt  -- row-- gt

User · Answer

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

User · Answer

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

User · Answer

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    lt div class  container  gt       lt div class  span12  gt           Centered stuff there       lt  div gt   lt  div gt    Take a look here for a fiddle  http   jsfiddle net D2RLR 7788

User · Answer

For Bootstrap version 3 1 1 and above  the best class for centering the content is the  center-block helper class

User · Answer

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

[html] How do you get centered content using Twitter Bootstrap?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap