How to col align right in Bootstrap 5 ?

Last Updated : 28 Apr, 2025

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. In this article, we will learn how we can right align the content in Col. We will create a row with 2 cols. One col on the left with its contents, and the second col with its contents aligned right.

Table of Content

Using text-end
Using float-end
Using ms-auto

Using Bootstrap 5 text-end

In Bootstrap 5 the text-right is now text-end. We will use this class to align the content on the right side of the col. The utility class text-center centers the text, class mt-1 gives the margin-top, and class text-success colors the text green. The class row defines the row, class col defines the columns, class bg-success colors the background color with green, class bg-primary gives the background color blue, and the class text-end aligns the text to the end on all screen sizes.

Example: This example describes aligning the col to the right using the text-end utility class in Bootstrap 5.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet">

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container 
                text-center">
        <div class="mt-1">
            <h2 class="text-success">
                GeeksforGeeks
            </h2>
            <h2>
                How to col align right
                in Bootstrap 5?
            </h2>
        </div>
        <div class="row">
            <div class="col bg-success 
                        text-light">
                Left Aligned Content
            </div>
            <div class="col text-end 
                        bg-warning">
                Right aligned
            </div>
        </div>
    </div>
</body>

</html>

Output:

z105

Using Bootstrap 5 col float-end

The Bootstrap utility class float-right is now float-end. We will use this to right align the content in the col. The float-end class floats the element to the right side on all the screen sizes. The utility class text-center centers the text, class mt-1 gives the margin-top, and class text-success colors the text to the green color. The class row defines the row, class col defines the columns, class bg-success colors the background color with green, class bg-primary gives the background color blue, and the class text-end aligns the text to the end on all screen sizes.

Example: This example describes the float-end utility class col aligned right in Bootstrap 5.

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container text-center ">
        <div class="mt-1">
            <h2 class="text-success">
                GeeksforGeeks
            </h2>
            <h2>
                How to col align right in Bootstrap 5?
            </h2>
        </div>
        <div class="row">
            <div class="col bg-success 
                        text-light ">
                Left Aligned Content
            </div>
            <div class="col  bg-primary 
                        text-light 
                        float-end text-end">
                Right aligned
            </div>
        </div>
    </div>
</body>

</html>

Output:

z106

Using Bootstrap 5 col ms-auto

The Bootstrap utility class ms-auto is used to right-align the text. In bootstrap 5, ml-auto is now ms-auto. The utility class text-center to center the text, mt-1 gives the margin-top, text-success color the text green color, row defines the row, col defines the columns, bg-success colors the background color with green, bg-primary gives the background color blue, and text-end aligned the text to the end on all screen sizes.

Example: This example describes the ms-auto utility class col align right in Bootstrap 5.