How Can I Align Text Inside a Table Using Bootstrap CSS Classes?

How to Align Text Inside a Table Using CSS Classes

Twitter's Bootstrap framework offers a robust set of CSS classes for aligning text within HTML elements. These classes can be applied to table elements to achieve the desired alignment.

Bootstrap 3

For Bootstrap 3, the following classes can be used to align text within table cells:

• .text-left: Left-aligned text
• .text-center: Center-aligned text
• .text-right: Right-aligned text

Example:

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

Bootstrap 4

Bootstrap 4 introduces more granular control over text alignment, allowing you to specify different alignments for different viewport sizes. The following classes are available:

• .text-xs-left: Left-aligned text on all viewport sizes
• .text-xs-center: Center-aligned text on all viewport sizes
• .text-xs-right: Right-aligned text on all viewport sizes
• .text-sm-left: Left-aligned text on viewports sized SM (small) or wider
• .text-md-left: Left-aligned text on viewports sized MD (medium) or wider
• .text-lg-left: Left-aligned text on viewports sized LG (large) or wider
• .text-xl-left: Left-aligned text on viewports sized XL (extra-large) or wider

Bootstrap 5

In Bootstrap 5, .text-left has been replaced with .text-start, and .text-right has been replaced with .text-end. Otherwise, the alignment options remain the same.

The above is the detailed content of How Can I Align Text Inside a Table Using Bootstrap CSS Classes?. For more information, please follow other related articles on the PHP Chinese website!