How to center content in a bootstrap column

Question

I am trying to center column s content  Does not look like it works for me  Here is my HTML    lt div class  row  gt      lt div class  col-xs-1 center-block  gt          lt span gt aaaaaaaaaaaaaaaaaaaaaaaaaaa lt  span gt      lt  div gt    lt  div gt    JSFiddle Demo

User · Answer

Bootstrap naming conventions carry styles of their own, col-XS-1 refers to a column being 8.33% of the containing element wide. Your text, would most likely expand far beyond the specified width, and couldn't possible be centered within it. If you wanted it to constrain to the div, you could use something like css word-break.

For centering the content within an element large enough to expand beyond the text, you have two options.

Option 1: HTML Center Tag

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

Option 2: CSS Text-Align

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

If you wanted everything to constrain to the width of the column

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

UPDATE - Using Bootstrap's text-center class

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

FlexBox Method

<div class="row">
  <div class="flexBox" style="
    display: flex;
    flex-flow: row wrap;
    justify-content: center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

http://jsfiddle.net/usth0kd2/13/

User · Answer

col-lg-4 col-md-6 col-sm-8 col-11 mx-auto   1  col-lg-4   1200px  popular 1366  1600  1920    2  col-md-6   970px  popular 1024  1200   3  col-sm-8   768px  popular 800  768   4  col-11 set default smaller devices for gutter  popular 600 480 414 375 360 312   5  mx-auto   always block center

User · Answer

This is a simple way   lt div class  quot row quot  gt     lt div class  quot col-md-6 mx-auto quot  gt       lt p gt My text lt  p gt     lt  div gt   lt  div gt   The number 6 controls the width of the column

User · Answer

Use   lt  -- unsupported by HTML5 -- gt   lt div class  quot col-xs-1 quot  align  quot center quot  gt   instead of  lt div class  quot col-xs-1 center-block quot  gt   You can also use bootstrap 3 css   lt  -- recommended method -- gt   lt div class  quot col-xs-1 text-center quot  gt   Bootstrap 4 now has flex classes that will center the content   lt div class  quot d-flex justify-content-center quot  gt      lt div gt some content lt  div gt   lt  div gt   Note that by default it will be x-axis unless flex-direction is column

User · Answer

Updated Dec 2020   Tested and Included 5 0 version of Bootstrap   I know this question is old  And the question did not mentioned which version of Bootstrap he was using  So i ll assume the answer to this question is resolved  If any of you  like me  stumbled upon this question and looking for answer using current bootstrap 5 0  2020  and 4 5  2019  framework  then here s the solution  Bootstrap 4 5 and 5 0 Use d-flex justify-content-center on your column div  This will center everything inside that column   lt div class  quot row quot  gt       lt div class  quot col-4 d-flex justify-content-center quot  gt             Image      lt  div gt   lt  div gt   If you want to align the text inside the col just use text-center  lt div class  quot row quot  gt       lt div class  quot col-4 text-center quot  gt             text only      lt  div gt   lt  div gt   If you have text and image inside the column  you need to use d-flex justify-content-center and text-center   lt div class  quot row quot  gt       lt div class  quot col-4 d-flex justify-content-center text-center quot  gt             for image and text      lt  div gt   lt  div gt

User · Answer

No need to complicate things  With Bootstrap 4  you can simply align items horizontally inside a column using the margin auto class my-auto            lt div class  col-md-6 my-auto  gt              lt h3 gt Lorem ipsum  lt  h3 gt            lt  div gt

User · Answer

add this to your css      myClass            margin 0 auto                  add the class to the span tag  could add it to the div and not using a span      at all      lt div class  row  gt      lt div class  col-xs-1 center-block  gt          lt span class  myClass  gt aaaaaaaaaaaaaaaaaaaaaaaaaaa lt  span gt      lt  div gt    lt  div gt

User · Answer

If none of the above work  like in my case trying to center an input   I used Boostrap 4 offset   lt div class  quot row quot  gt       lt div class  quot col-6 offset-3 quot  gt           lt input class  quot form-control quot  id  quot myInput quot  type  quot text quot  placeholder  quot Search   quot  gt       lt  div gt   lt  div gt

User · Answer

Use text-center instead of center-block   Or use center-block on the span element  I did the column wider so you can see the alignment better     lt div class  row  gt      lt div class  col-xs-10  style  background-color  123   gt         lt span class  center-block  style  width 100px  background-color  ccc   gt abc lt  span gt      lt  div gt   lt  div gt

User · Answer

You can add float none  margin auto  styling to centerize column content

User · Answer

Bootstrap 4  horizontal and vertical align contents using flex box  lt div class  quot page-hero d-flex align-items-center justify-content-center quot  gt    lt h1 gt Some text  lt  h1 gt   lt  div gt   Use bootstrap class align-items-center and justify-content-center   x000D   x000D   page-hero     height  200px    background-color  grey    x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  integrity  sha384-MCw98 SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO  crossorigin  anonymous  gt    lt div class  page-hero d-flex align-items-center justify-content-center  gt     lt h1 gt Some text  lt  h1 gt   lt  div gt  x000D   x000D   x000D

[html] How to center content in a bootstrap column?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap