Text-align class for inside a table

How to go with the Bootstrap 5 flow

In Bootstrap 5, the text-start and text-end classes replace text-left and text-right. This change better supports right-to-left languages. Use them like so:

<!-- New wave aligning -->
<td class="text-start">She Starts from Here</td>
<td class="text-end">He Ends Here</td>


Responsive design with Bootstrap

Responsive design is vital for a top-notch user experience. Bootstrap 4 introduced text-sm-right type of classes for easy responsive text alignment. Here’s an example:

<!-- Adapting to small screens like a pro! -->
<td class="text-right text-sm-left">Big on big screens, humbler on small ones!</td>


This code aligns text to the right on bigger screens, but jumps to the left on small devices.

Roll your own alignment in tables

If you're pulling your hair out because Bootstrap doesn't quite give you what you need, you can use custom CSS classes for additional control and legibility. Now, you can define semantic classes like .price-label or .price-value with text-align: right:

/* Imagine this in your bank statement! */
.price-value {
  text-align: right;
}


Overwrite those Bootstrap styles

When Utility Classes just don't cut it, override Bootstrap’s default styles. Make sure to load your styles after the bootstrap.css file. Sometimes, you may need to use the !important rule to stamp your authority:

/* The 'right' way, no Bootstrap interference! */
.custom-align-right {
  text-align: right !important;
}


Slap these styles directly on your table cell elements to see immediate results:

<!-- Right you go! -->
<td class="custom-align-right"> Custom Text Here </td>


Text alignment use cases

For print-ready tables

In print-oriented tables, right-alignment keeps numbers neatly lined up:

<!-- Numbers right-aligned for super readability -->
<td class="text-end">123.45</td>


Dashboard Interfaces

In dashboard interfaces, left or justified alignment makes data more digestible:

<!-- User Data here, clear and fantastic! -->
<td class="text-start">User Data</td>


Web Accessibility

Right alignment is crucial for languages read from right to left. Bootstrap 5 shines here:

<!-- معلومات is happier ending right -->
<td class="text-end">معلومات</td>


References