How to col align right in Bootstrap 5 ?
Last Updated :
04 Dec, 2023
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.
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=
rel="stylesheet">
<script src=
</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:
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=
rel="stylesheet">
<script src=
</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:
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</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 ms-auto
text-end">
Right aligned
</div>
</div>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...