How to Align Text in Bootstrap Tables?

Text Alignment Classes in Bootstrap for Table Elements

Ever need to align text within a table, such as financial figures, right-justified? Bootstrap provides classes to handle this task effortlessly.

Bootstrap 3

To align text right in Bootstrap 3, use the "text-right" class.

<code class="html"><th><span class="text-right">Total</span></th>
<td><span class="text-right">,000,000.00</span></td></code>

Bootstrap 4

In Bootstrap 4, use "text-{breakpoint}-{alignment}":

<code class="html"><p class="text-xs-left">Left-aligned on all viewports</p>
<p class="text-lg-right">Right-aligned on large and wider viewports</p></code>

Bootstrap 5

Bootstrap 5 introduces "text-start" and "text-end":

<code class="html"><p class="text-start">Left-aligned text</p>
<p class="text-end">Right-aligned text</p></code>

These classes provide flexibility for text alignment within tables, allowing you to easily control the presentation of your data.

The above is the detailed content of How to Align Text in Bootstrap Tables?. For more information, please follow other related articles on the PHP Chinese website!