Is there anything built into to Twitter Bootstrap 2.0 to align table contents?

Question

It is easy to align table by setting "align" attribute, but table aligning by css is a bit hacky. Is there built-in support for tables aligning in Twitter Bootstrap 2.0?

Martyry

I'm not sure this is 'hacky'. Bootstrap is just that a bootstrap to get things started and is meant to be built upon. – Freitas

Answer 1

There is nothing built in to support this but it is very easy to add something like:

.table th.rightCell,
.table td.rightCell {
  text-align: right;
}

Freitas

Alternatively to keep Bootstrap's naming conventions and to utilize the pre-built text-right class, you should add this to your own css: .table th.text-right, .table td.text-right { text-align: right; } and then use <td class="text-right">Ta-dam</td> – Amethyst

Answer 2

Bootstrap's alignment classes include .text-right which sets text-align: right.

Unfortunately Bootstrap sets text-align: left for table cells so applying .text-right to a <td> doesn't have any effect:

<td class="text-right">
  Still left aligned
</td>

Adding .text-right to a block element inside the cell however does work:

<td>
  <p class="text-right">Right aligned</p>
</td>
<td>
  <div class="text-right">Right aligned</div>
</td>

Gilliam

I'm using Bootstrap 3.0, and .text-right works perfectly when applied directly to a <td>. – Paralytic

Answer 3

For "td" I used this which is included in bootstrap css:

<td class="pagination-centered">

Graves

"pagination-centered" <- it's too long (19 chars). I'd rather use a shorter classnames. – Rocha