Bootstrap Text Alignment Classes for Table Cells

Bootstrap provides text-alignment utility classes that can be applied directly to <th> and <td> elements. You will learn which class to use in Bootstrap 3, 4, and 5, why numeric columns are normally right-aligned, and how to choose a class that matches your project’s Bootstrap version.

Text alignment controls where inline content, such as words and numbers, appears inside its container. In an HTML table, the container is usually a table header cell (<th>) or data cell (<td>).

Right-aligning numbers makes columns easier to scan because digits with the same place value line up visually. This is especially useful for prices, totals, percentages, account balances, and quantities.

Bootstrap exposes common CSS rules through utility classes, so you do not need to create a custom class for a simple alignment rule.

The correct class depends on your Bootstrap version:

• Bootstrap 3 and 4: use .text-right.
• Bootstrap 5: use .text-end.

Bootstrap 5 uses logical alignment names: start and end. In a left-to-right language such as English, end means right. This also lets layouts adapt better to right-to-left languages.

Think of every table cell as a small box with a line of text inside it.

• Left alignment places the text against the box’s left wall.
• Center alignment places the text in the middle of the box.
• Right alignment places the text against the box’s right wall.

For a column of money, putting every value against the right wall makes the decimal points and final digits appear in a consistent vertical area. That makes comparison faster.

Use the alignment utility directly on the table cell.

Bootstrap 5

<table class="table">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col" class="text-end">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Annual subscription</td>
      <td class="text-end">$1,000,000.00</td>
    </tr>
  </tbody>
</table>

text-end aligns the header and amount at the inline end of the cell. In a standard English page, that is the right side.

Bootstrap 3 or Bootstrap 4

<table class="table">
  <tr>
    <th>Product</th>
    <th class="text-right">Total</th>
  </tr>
  <tr>
    <td>Annual subscription</td>
    <td class="text-right">$1,000,000.00</td>
  </tr>
</table>

In Bootstrap 3 and 4, .text-right applies text-align: right.

Plain CSS alternative

If Bootstrap is not available, create your own reusable class:

.align-right {
  text-align: right;
}

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

Consider this Bootstrap 5 table row:

<tr>
  <td>Cloud storage</td>
  <td class="text-end">$250.00</td>
</tr>

1. The browser creates a table row with two cells.
2. The first <td> has no alignment utility, so it uses the table or browser’s normal text alignment, usually left in an English document.
3. The second <td> has the text-end class.
4. Bootstrap’s stylesheet contains a rule that sets the cell’s text alignment to the inline end.
5. In a left-to-right layout, $250.00 is displayed against the right edge of that cell.

The value itself is unchanged. The class affects presentation only, not the number, currency, or table data.

Text-alignment utilities are frequently used in data-heavy interfaces:

• Invoices: right-align line-item prices, tax, and invoice totals.
• Financial dashboards: align revenue, expenses, balances, and percentage changes.
• Shopping carts: align unit prices and order totals.
• Admin tables: place IDs, dates, quantities, and numeric metrics in consistently aligned columns.
• API monitoring pages: align response times, status counts, and request totals.
• Reports and exports: improve readability before users print or save a report as a PDF.

A common convention is to left-align descriptive text, such as product names, and right-align numerical values.

In real projects, developers usually apply alignment at the column level by adding the utility class to every matching <th> and <td>.

<th scope="col" class="text-end">Amount</th>
<td class="text-end">$49.99</td>
<td class="text-end">$125.00</td>

For responsive layouts in Bootstrap 5, use breakpoint variants when an alignment should change by screen width:

<td class="text-start text-md-end">$49.99</td>

This is left-aligned on small screens and end-aligned from the md breakpoint upward.

In template-driven applications, keep the value as data and use the class as display styling:

<td class="text-end">{{ formatCurrency(order.total) }}</td>

This separation matters: formatting code decides how a value is displayed, while the Bootstrap utility decides where it is positioned.

For repeated table designs, teams may also create a shared table component so all currency columns use the same formatting, spacing, and alignment rules.

Using a class that Bootstrap does not provide

This class does nothing unless you define it yourself:

<td class="align-right">$1,000.00</td>

Use Bootstrap’s version-appropriate utility instead:

<!-- Bootstrap 5 -->
<td class="text-end">$1,000.00</td>

<!-- Bootstrap 3 or 4 -->
<td class="text-right">$1,000.00</td>

Mixing Bootstrap versions

text-right is not the standard Bootstrap 5 utility, and text-end is not available in older Bootstrap releases. Check the version loaded by the project before selecting a class.

Applying the class to the wrong element

Applying alignment to a surrounding element may not affect a cell if a more specific table rule overrides it. Put the utility directly on the relevant <th> or <td>.

<td class="text-end">$99.00</td>

Expecting text alignment to size a column

text-end changes text position, not column width. Use table layout, width utilities, CSS sizing, or column definitions when you need to control widths.

Treating money as an unformatted raw number

Alignment cannot make 1000000 easy to read. Format currency separately, then align it:

<td class="text-end">$1,000,000.00</td>

Forgetting header alignment

If data is right-aligned but its heading remains left-aligned, the column can look inconsistent. Align the matching <th> too when that improves readability.

text-align aligns inline content inside an element. It is different from these layout tools:

<!-- Bootstrap 5 -->
<td class="text-start">Description</td>
<td class="text-center">Status</td>
<td class="text-end">$49.99</td>

<!-- Bootstrap 3 and 4 -->
<td class="text-left">Description</td>
<td class="text-center">Status</td>
<td class="text-right">$49.99</td>

• Apply alignment utilities directly to <th> and <td> elements.
• Use .text-end for right alignment in Bootstrap 5.
• Use .text-right for right alignment in Bootstrap 3 and 4.
• Use .text-center to center text in all of these versions.
• In Bootstrap 5, start and end adapt to text direction.
• Alignment changes appearance only; it does not format a number or change column width.
• For a responsive Bootstrap 5 rule, use classes such as .text-start.text-md-end.

What Bootstrap class right-aligns text in a table cell?

Use .text-end in Bootstrap 5. Use .text-right in Bootstrap 3 or Bootstrap 4.

Can I use text-end on a <th> element?

Yes. Bootstrap text utility classes work on table headers and table data cells.

Why does align-right not work in Bootstrap?

align-right is not a standard Bootstrap text utility. It only works if your own stylesheet defines it.

Should currency be aligned to the right in a table?

Usually, yes. Right alignment makes amounts easier to compare vertically, especially when values have different numbers of digits.

Does text-end always mean right-aligned?

In a normal left-to-right document, yes. In a right-to-left document, end can be the left side. This behavior is intentional and supports internationalized layouts.

How do I align a value right only on larger screens in Bootstrap 5?

Use a responsive utility such as class="text-start text-md-end". It starts left-aligned and becomes end-aligned at the md breakpoint.

Does text alignment affect sorting or numeric calculations?

No. It only affects visual presentation. Sorting and calculations depend on the underlying data and application code.

• HTML tables — Learn how <table>, <tr>, <th>, and <td> structure tabular data.
• CSS text-align — The underlying CSS property used by Bootstrap alignment utilities.
• Bootstrap utility classes — Reusable Bootstrap classes for spacing, display, sizing, colors, and alignment.
• Bootstrap responsive utilities — Change styles at breakpoints such as sm, md, and lg.
• Logical CSS properties — Understand start and end, which adapt to writing direction.
• Currency formatting — Format numeric values consistently before displaying them in financial tables.
• Accessible tables — Use table headers and scope attributes so assistive technologies can interpret tabular data.