How can I align numbers right and text left in the same table?

Asked on Aug 06, 2025

1 Answer

To align numbers to the right and text to the left in the same table using Bootstrap 5, you can use the `text-end` class for right alignment and the default alignment for left. Here's a simple example:

<!-- BEGIN COPY / PASTE -->
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Item</th>
                    <th scope="col" class="text-end">Quantity</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Apples</td>
                    <td class="text-end">10</td>
                </tr>
                <tr>
                    <td>Bananas</td>
                    <td class="text-end">25</td>
                </tr>
            </tbody>
        </table>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `text-end` class on the `` and `` elements where you want the numbers to be right-aligned.
By default, text in table cells is left-aligned, so no additional class is needed for text alignment.
Ensure your table has the `table` class for basic Bootstrap styling.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions