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 "Lorem" to sit in the middle of the four "1".

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

<table class="table">
  <thead>
    <tr>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">Lorem</td>
      <td colspan="4">ipsum</td>
      <td colspan="4">dolor</td>
    </tr>
  </tbody>
</table>

JSFiddle

score 213 · Answer 1 · answered Feb 17 '14 at 14:36

213

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:

<td class="text-center">some text</td>

answered Feb 17 '14 at 14:36

Alex Che

6,659
4
44
53

3

I liked this solution over changing the entire .table td style. – Stuart Sep 09 '15 at 22:49
2

You can also just add class "text-center" to table element. – shad0wec Apr 21 '17 at 11:53
This is the real answer. – Nyxynyx Oct 31 '18 at 14:22

score 164 · Accepted Answer · edited Dec 11 '19 at 21:46

164

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;   
}

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

.table td {
  text-align: center;
}

<table class="table">
  <thead>
    <tr>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">Lorem</td>
      <td colspan="4">ipsum</td>
      <td colspan="4">dolor</td>
    </tr>
  </tbody>
</table>

Updated JSFIDDLE

edited Dec 11 '19 at 21:46

Community

1
1

answered Jul 26 '12 at 21:33

Tim

5,732
2
27
35

55

In later versions there a text-center class for this. – MGP Mar 21 '13 at 21:04
11

beware: .table td { text-align: center; } will center ALL your TDs – rbp Apr 02 '13 at 15:00
9

@xr09 Yes there is, `.text-center`, but the specificity of `.table td` will still defeat it. This is why bootstrap should have started with tagnames instead of launching directly into classes like `.table` – Sinetheta May 22 '13 at 17:35
7

Add ``.texter-center`` in the ```` and all rows will become centered.
– chaim Aug 09 '14 at 01:07
@chaim comment should be posted as an answer. Worked on bootstrap-vue 2.0.1 – JBlanco Jan 30 '20 at 21:42
@chaim, I guess it is `.text-center` – Appaji Chintimi Mar 13 '21 at 12:18

score 45 · Answer 3 · edited Jul 23 '16 at 03:19

45

I think who the best mix for html & Css for quick and clean mod is :

<table class="table text-center">
<thead>
        <tr>                    
        <th class="text-center">Uno</th>
        <th class="text-center">Due</th>
        <th class="text-center">Tre</th>
        <th class="text-center">Quattro</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</tbody>
</table>

close the <table> 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

edited Jul 23 '16 at 03:19

Vini.g.fer

11,639
16
61
90

answered Jul 30 '14 at 12:00

dbjoomla

451
4
2

1

while this question already has answer,there is no meaning of posting new answer!! – Pragnesh Ghoda シ Jul 30 '14 at 12:21

score 32 · Answer 4 · answered Jun 21 '13 at 06:14

32

You can make td's align without changing the css by adding a div with a class of "text-center" inside the cell:

    <td>
        <div class="text-center">
            My centered text
        </div>
    </td>

answered Jun 21 '13 at 06:14

user2507821

329
3
3

6

As far as I can tell, in Bootstrap 2.3 the `td {text-align:left}` will override any additional attempts to center things. I just attempted doing it this way, with no success. – Jason Lowenthal Jul 16 '13 at 21:24

score 17 · Answer 5 · answered Jun 04 '13 at 12:00

17

<td class="text-center">

and fix .text-center in bootstrap.css:

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

answered Jun 04 '13 at 12:00

XAOPT

327
2
4

3

I believe you do not want to directly change bootstrap.css. – Mike Cole Oct 07 '13 at 14:24
4

I did not need to fix .text-center in bootstrap.css, this worked without it. – user573335 Oct 23 '13 at 09:53

score 8 · Answer 6 · edited May 22 '19 at 13:41

8

If it's just once, you shouldn't alter your style sheet. Just edit that particular td:

<td style="text-align: center;">

Cheers

edited May 22 '19 at 13:41

SharpC

6,974
4
45
40

answered May 09 '14 at 15:30

Breno

5,952
1
20
25

score 6 · Answer 7 · edited May 22 '19 at 13:41

6

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.

edited May 22 '19 at 13:41

SharpC

6,974
4
45
40

answered Feb 24 '14 at 09:12

VSP

2,367
8
38
59

score 4 · Answer 8 · answered Sep 24 '13 at 13:16

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.

score 4 · Answer 9 · answered Dec 07 '13 at 16:37

4

add:

<p class="text-center"> Your text here... </p>

answered Dec 07 '13 at 16:37

Artem Zinoviev

869
12
32

score 1 · Answer 10 · answered May 16 '17 at 12:42

just give the surrounding <tr> a custom class like:

<tr class="custom_centered">
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>

and have the css only select <td>s that are inside an <tr> 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).

Centering text in a table in Twitter Bootstrap

10 Answers10

Linked

Related