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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on Jul 25, 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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on Jul 25, 2025

Answer

The Q&A Network