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

Asked on Aug 06, 2025

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.