Advertisement
Advertisement


Text-align class for inside a table


Question

Is there a set of classes in Twitter's Bootstrap framework that aligns text?

For example, I have some tables with $ totals that I want aligned to the right...

<th class="align-right">Total</th>

and

<td class="align-right">$1,000,000.00</td>
2019/11/03
1
734
11/3/2019 7:09:04 AM

Accepted Answer

Bootstrap 3

v3 Text Alignment Docs

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 3 text align example

Bootstrap 4

v4 Text Alignment Docs

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Bootstrap 4 text align example

2016/12/13
1434
12/13/2016 6:08:49 PM

Using Bootstrap 3.x using text-right works perfectly:

<td class="text-right">
  text aligned
</td>
2014/02/10

No, Bootstrap doesn't have a class for that, but this kind of class is considered a "utility" class, similar to the ".pull-right" class that @anton mentioned.

If you look at utilities.less you will see very few utility classes in Bootstrap, the reason being that this kind of class is generally frowned upon, and is recommended to be used for either: a) prototyping and development - so you can quickly build out your pages, then remove the pull-right and pull-left classes in favor of applying floats to more semantic classes or to the elements themselves, or b) when it's clearly more practical than a more semantic solution.

In your case, by your question it looks like you wish to have certain text align on the right in your table, but not all of it. Semantically, it would be better to do something like (I'm just going to make up a few classes here, except for the default bootstrap class, .table):

  <table class="table price-table">
    <thead>
      <th class="price-label">Total</th>
    </thead>
    <tbody>
      <tr>
        <td class="price-value">$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

And just apply the text-align: left or text-align: right declarations to the price-value and price-label classes (or whatever classes work for you).

The problem with applying align-right as a class, is that if you want to refactor your tables you will have to redo the markup and the styles. If you use semantic classes you might be able to get away with refactoring only the CSS content. Plus, if are taking the time to apply a class to an element, it's best practice to try to assign semantic value to that class so that the markup is easier to navigate for other programmers (or you three months later).

One way to think of it is this: when you pose the question "What is this td for?", you will not get clarification from the answer "align-right".

2019/07/02

Bootstrap 2.3 has utility classes text-left, text-right, and text-center, but they do not work in table cells. Until Bootstrap 3.0 is released (where they have fixed the issue) and I am able to make the switch, I have added this to my site CSS that is loaded after bootstrap.css:

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

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

.text-left {
    text-align: left !important;
}
2020/04/15

Just add a "custom" stylesheet which is loaded after Bootstrap´s stylesheet. So the class definitions are overloaded.

In this stylesheet declare the alignment as follows:

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

Now you are able to use the "common" alignment conventions for td and th elements.

2013/06/04

I guess because CSS already has text-align:right, AFAIK, Bootstrap doesn't have a special class for it.

Bootstrap does have "pull-right" for floating divs, etc. to the right.

Bootstrap 2.3 just came out and added text alignment styles:

Bootstrap 2.3 released (2013-02-07)

2019/07/02