Centering text in a table in Twitter Bootstrap
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>
The .table td
's text-align is set to left, rather than center.
Adding this should center all your td
s:
.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