Search code examples
htmlcssbootstrap-5

Bootstrap 5 - text-end class is not properly aligned

I'm having an issue in properly setting my text-align to the right using Bootstrap 5. After some investigating I thought by adding class=text-end from this question would help me move the total to the very end of my table, but as you can see from the pic below that is not the case. Why is this happening and how can I fix this?

<div class="row">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Product</th>
                <th scope="col">Quantity</th>
                <th scope="col">Unit Price</th>
            </tr>
        </thead>
        <tbody>
            @foreach(var order in @Model.OrderDetails)
            {
                <tr>
                    <td>@order.Product.ProductName</td>
                    <td>@order.Quantity</td>
                    <td>[email protected]/ea</td>
                </tr>
            }
        </tbody>
        <tfoot>
            <tr class="text-end">
                <th>Total :</th>
                <td>[email protected]</td>
            </tr>
        </tfoot>
    </table>
</div>

Class Text End

Solution

  • You should specify the Total header column to use 2 columns via colspan="2" in the footer.

    <tr class="text-end">
  <th colspan="2">Total :</th>
  <td class="text-end">[email protected]</td>
</tr>

    Demo @ StackBlitz