How to Achieve Text Alignment in Bootstrap Tables?

Text Alignment in Bootstrap Framework

Introduction:

Tables are a common element used to present data in a structured format. Aligning text within table cells is crucial for readability and improving the overall presentation. This guide provides insights into utilizing Twitter's Bootstrap framework to achieve text alignment within tables.

Bootstrap 3:

Bootstrap 3 offers straightforward text alignment classes:

• text-left: Aligns text to the left.
• text-center: Centers text horizontally.
• text-right: Aligns text to the right.
• text-justify: Justifies text to fill the available space evenly.
• text-nowrap: Prevents text from wrapping, maintaining a single line.

For example, to align a table header for a total value to the right:

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

To align the corresponding table data cell to the right:

<td><span class="align-right">,000,000.00</span></td>

Bootstrap 4 and Bootstrap 5:

In Bootstrap 4 and 5, the text alignment classes have been expanded, providing more granular control:

• .text-start: Aligns text to the left in LTR (left-to-right) languages and to the right in RTL (right-to-left) languages.
• .text-center: Centers text horizontally.
• .text-end: Aligns text to the right in LTR languages and to the left in RTL languages.

Additionally, Bootstrap 4 and 5 introduce responsive text alignment classes, allowing for different alignments on different viewport sizes. For example, to align text to the right on large and extra-large viewports:

<p class="text-lg-right text-xl-right">Right aligned text on large and extra-large viewports.</p>

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