Bootstrap Table Text Alignment Classes: Right-Align Currency Values

You will learn how Bootstrap text-alignment utility classes work in tables, which class to use for each Bootstrap version, and why currency columns are usually right-aligned.

Bootstrap provides utility classes: small, reusable CSS classes that apply one focused style. Text alignment utilities set CSS's text-align property.

For a numeric table column, apply the utility directly to the <th> and <td> elements. This keeps the alignment attached to the content that needs it.

Bootstrap class names depend on the version:

• Bootstrap 3 and 4: .text-left, .text-center, .text-right
• Bootstrap 5: .text-start, .text-center, .text-end

Bootstrap 5 uses logical directions: start means the beginning of the current writing direction, and end means the end. In a typical left-to-right English page, .text-end aligns text to the right. This also makes layouts work better in right-to-left languages.

Right-aligning currency and other numbers makes digits and decimal points easier to compare down a column.

Think of a table column as a row of numbers written on a sheet of accounting paper. If every amount ends at the same right-hand edge, the decimal places form a neat vertical line. Your eye can quickly compare $25.00, $125.00, and $1,000.00.

A Bootstrap alignment utility is like placing a small instruction label on a cell: “put all text at this edge.” The cell still contains the same value; only its presentation changes.

Use the alignment class on the table cell or header.

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>Server subscription</td>
      <td class="text-end">$1,000,000.00</td>
    </tr>
  </tbody>
</table>

.text-end right-aligns the header and currency cell in a standard left-to-right document.

Bootstrap 3 or Bootstrap 4

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

Use .text-right for Bootstrap 3 and 4. A custom class such as .align-right does nothing unless your own CSS defines it.

Consider this Bootstrap 5 example:

<tr>
  <td>Annual plan</td>
  <td class="text-end">$120.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 page's normal text alignment, usually left-aligned in English.
3. The second <td> has the text-end class.
4. Bootstrap's stylesheet contains a rule equivalent to:

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

1. The browser places $120.00 against the right edge of that cell.

In a Bootstrap 3 or 4 project, replace text-end with text-right; the result is the same for a left-to-right page.

• Invoices: right-align unit prices, taxes, discounts, and invoice totals.
• Financial dashboards: align revenue, balances, exchange rates, and percentage columns for quick comparison.
• Admin tables: center compact status indicators while leaving names left-aligned and amounts right-aligned.
• Reports: align dates, quantities, and calculated values consistently across many rows.
• Responsive interfaces: use breakpoint variants to change alignment when a table becomes a stacked mobile layout.

In projects, developers usually choose alignment based on the data type and apply it consistently across an entire column.

Keep headers and values aligned

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

If only the body cells are right-aligned, the header can look disconnected from its column.

Use responsive alignment when needed

Bootstrap 5 supports breakpoint variants:

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

This is start-aligned on small screens and end-aligned from the md breakpoint upward. It can help when a mobile layout needs more readable stacked content.

Use semantic table markup

<th scope="col" class="text-end">Total</th>

scope="col" helps assistive technologies understand that the header labels a column. Alignment is visual; semantic HTML describes what the data means.

For repeated columns in a server-rendered template or component, teams often store a column's display settings in one configuration object or reusable table component so every table follows the same conventions.

Using a class that Bootstrap does not provide

This does not work by itself:

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

align-right is not a standard Bootstrap text utility. Use .text-right in Bootstrap 3/4 or .text-end in Bootstrap 5, or define your own CSS.

Mixing up Bootstrap versions

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

This is correct in Bootstrap 3 and 4, but Bootstrap 5 uses .text-end. Check the version actually loaded by the project before choosing a class.

Using pull-right or float-end for cell content

Float utilities move an element out of normal flow and are not the right tool for aligning all text in a table cell.

<td><span class="float-end">$1,000.00</span></td>

Prefer this:

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

Aligning only some cells in a numeric column

A column is harder to scan when some values are left-aligned and others are right-aligned. Apply the same class to the header and every relevant data cell.

Expecting text alignment to change the column width

text-align controls where content sits inside a cell. It does not set the cell's width. Use table layout rules, CSS widths, or Bootstrap sizing/layout utilities when width is the actual issue.

text-align affects inline content within an element, such as text, inline links, and inline icons. A float utility changes how an element is positioned in the document flow. For a table value, text alignment is simpler and more predictable.

<!-- Bootstrap 5: right-align a table value -->
<td class="text-end">$1,000.00</td>

<!-- Bootstrap 3/4: right-align a table value -->
<td class="text-right">$1,000.00</td>

• Apply the class to <th> and <td> elements.
• Use right/end alignment for currency and comparable numeric values.
• Use scope="col" on column header cells when appropriate.
• Use text-start text-md-end when alignment should change by screen size.
• text-align does not control cell or column width.

Which Bootstrap class right-aligns text in a table?

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

Why does .align-right not work in Bootstrap?

It is not a built-in Bootstrap text alignment class. It will work only if your project defines CSS for it.

Should currency values be right-aligned in HTML tables?

Usually, yes. Right alignment makes values with different digit lengths easier to compare vertically.

Is .text-right available in Bootstrap 5?

No. Bootstrap 5 uses .text-end instead of directional .text-right.

Can I center text in a Bootstrap table cell?

Yes. Add .text-center to the <td> or <th> in supported Bootstrap versions.

Does .text-end always mean right-aligned?

In a typical left-to-right document, yes. In a right-to-left document, “end” can be the left side. This is intentional because Bootstrap 5 uses direction-aware logical alignment.

Can I align a full table column with one class?

HTML does not let a class on one header automatically style every body cell. Add the utility to each relevant <th> and <td>, or use project CSS or a reusable table component for repeated columns.

• CSS text-align — the underlying CSS property that Bootstrap alignment utilities set.
• Bootstrap utility classes — reusable single-purpose classes for spacing, display, colors, and alignment.
• HTML tables — semantic markup using <table>, <thead>, <th>, <tbody>, and <td>.
• Responsive design — Bootstrap breakpoint utilities can change alignment across screen sizes.
• CSS logical properties — explains direction-aware terms such as start and end.
• Accessible tables — scope, captions, and meaningful headers help people using assistive technologies.
• Number and currency formatting — formats numeric data consistently before displaying it in a table.