In this article, we will see how to align columns in a row on the text end using Bootstrap5. Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc.

Using col-auto

In this approach, we are using the col-auto class provided by Bootstrap, through which all the tags inside this col-auto class will automatically take the maximum width of the maximum content present in it.

Example: In this example, we will see the implementation of the above approach with an example.

Output:

 

Using col-md-6

By assigning col-md-6 to both columns within the row and applying the text-end class directly to the <div>, the text is aligned to the right, providing a clean and responsive layout.

Example: In this example, we will use col-md-6 to align columns in a row on the text end.

Output