Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text-align class for inside a table

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> 
like image 211
mylesthe.dev Avatar asked Oct 10 '12 22:10

mylesthe.dev


People also ask

How do I align text in a table?

Select the text and go to the Layout tab and the Alignment section of the ribbon. Choose “Align Center.” Your text will then be right in the middle of the cell. Centering the text in your Word table is a simple task whether horizontally, vertically, or both.

Does text-align work on tables?

Technically text-align should only be used to align non-block level elements, of which a table is not, regardless of if it works or not. The align property on a table doesnt refer to text but to the position of the table relative to its parent.


2 Answers

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


Bootstrap 5

v5 Text Alignment Docs

text-left has been replaced with text-start, text-right has been replaced with text-end

<p class="text-start">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-end">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p> 
like image 175
Michael J. Calkins Avatar answered Oct 02 '22 01:10

Michael J. Calkins


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

<td class="text-right">   text aligned </td> 
like image 42
Paolo Casciello Avatar answered Oct 02 '22 00:10

Paolo Casciello