Centering text in a table in Twitter Bootstrap

Question

For some reason  The text inside the table still is not centered  Why  How do I center the text inside the table  To make it really Clear  For example  I want  quot Lorem quot  to sit in the middle of the four  quot 1 quot      x000D   x000D   import url  http   twitter github com bootstrap assets css bootstrap css    table  thead  tr  tbody  th  td     text-align  center    x000D   lt table class  table  gt     lt thead gt       lt tr gt         lt th gt 1 lt  th gt         lt th gt 1 lt  th gt         lt th gt 1 lt  th gt         lt th gt 1 lt  th gt         lt th gt 2 lt  th gt         lt th gt 2 lt  th gt         lt th gt 2 lt  th gt         lt th gt 2 lt  th gt         lt th gt 3 lt  th gt         lt th gt 3 lt  th gt         lt th gt 3 lt  th gt         lt th gt 3 lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td colspan  4  gt Lorem lt  td gt         lt td colspan  4  gt ipsum lt  td gt         lt td colspan  4  gt dolor lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt  x000D   x000D   x000D   JSFiddle

User · Accepted Answer

The  table td  s text-align is set to left  rather than center   Adding this should center all your tds     table td      text-align  center            x000D   x000D   import url  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css    x000D  table  x000D  thead  x000D  tr  x000D  tbody  x000D  th  x000D  td   x000D    text-align  center  x000D    x000D   x000D   table td   x000D    text-align  center  x000D    x000D   lt table class  table  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt 1 lt  th gt  x000D         lt th gt 1 lt  th gt  x000D         lt th gt 1 lt  th gt  x000D         lt th gt 1 lt  th gt  x000D         lt th gt 2 lt  th gt  x000D         lt th gt 2 lt  th gt  x000D         lt th gt 2 lt  th gt  x000D         lt th gt 2 lt  th gt  x000D         lt th gt 3 lt  th gt  x000D         lt th gt 3 lt  th gt  x000D         lt th gt 3 lt  th gt  x000D         lt th gt 3 lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td colspan  4  gt Lorem lt  td gt  x000D         lt td colspan  4  gt ipsum lt  td gt  x000D         lt td colspan  4  gt dolor lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    Updated JSFIDDLE

User · Answer

lt td class  text-center  gt    and fix  text-center in bootstrap css    text-center       text-align  center  important

User · Answer

You can make td s align without changing the css by adding a div with a class of  text-center  inside the cell        lt td gt           lt div class  text-center  gt              My centered text          lt  div gt       lt  td gt

User · Answer

add    lt p class  text-center  gt  Your text here     lt  p gt

User · Answer

In Bootstrap 3  3 0 3  adding the  text-center  class to a td element works out of the box   I e   the following centers some text in a table cell    lt td class  text-center  gt some text lt  td gt

User · Answer

If it s just once  you shouldn t alter your style sheet  Just edit that particular td    lt td style  text-align  center   gt    Cheers

User · Answer

One of the main feature of Bootstrap is that it alleviates the use of  important tag  Using the above answer would defeat the purpose  You can easily customise bootstrap by modifying the classes in your own css file and linking it after including the boostrap css

User · Answer

I had the same problem and a better way to solve it without using  important was defining the following in my CSS   table th text-center  table td text-center        text-align  center      That way the specifity of the text-center class works correctly in tables

User · Answer

just give the surrounding  lt tr gt  a custom class like     lt tr class  custom centered  gt     lt td gt 1 lt  td gt     lt td gt 2 lt  td gt     lt td gt 3 lt  td gt   lt  tr gt    and have the css only select  lt td gt s that are inside an  lt tr gt  with your custom class   tr custom centered td     text-align  center      like this you don t risk to override other tables or even override a bootstrap base class  like some of my predecessors suggested

User · Answer

I think who the best mix for html  amp  Css for quick and clean mod is     lt table class  table text-center  gt   lt thead gt           lt tr gt                               lt th class  text-center  gt Uno lt  th gt           lt th class  text-center  gt Due lt  th gt           lt th class  text-center  gt Tre lt  th gt           lt th class  text-center  gt Quattro lt  th gt       lt  tr gt   lt  thead gt   lt tbody gt       lt tr gt           lt td gt 1 lt  td gt           lt td gt 2 lt  td gt           lt td gt 3 lt  td gt           lt td gt 4 lt  td gt       lt  tr gt   lt  tbody gt   lt  table gt    close the  lt table gt  init tag then copy where you want    I hope it can be useful  Have a good day w stackoverflow  p s  Bootstrap v3 2 0

[twitter-bootstrap] Centering text in a table in Twitter Bootstrap

Examples related to twitter-bootstrap