How to align columns in a row on text end using Bootstrap 5 ?
Last Updated :
28 Apr, 2025
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
</script>
<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>
<section>
<div class="container">
<div class="row bg-success
text-light
justify-content-end">
<div class="col-auto">
<div>
<p class="text-end">HTML
<span>HyperText Markup Language</span>
</p>
<p class="text-end">CSS
<span>Cascading Style Sheet</span>
</p>
<p class="text-end">IP
<span>Internet Protocol</span>
</p>
<p class="text-end">DS
<span>Data Structure</span>
</p>
</div>
</div>
<div class="col bg-warning">
<canvas></canvas>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
</script>
<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 using </h2>
</div>
<section>
<div class="container">
<div class="row bg-success text-light">
<div class="col">
<div class="text-end">
<p>HTML
<span>HyperText Markup Language</span>
</p>
<p>CSS
<span>Cascading Style Sheet</span>
</p>
<p>
IP<span>Internet Protocol</span>
</p>
<p>
DS<span>Data Structure</span>
</p>
</div>
</div>
<div class="col-6 bg-warning">
<canvas></canvas>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
Output
Â
Similar Reads
How to Align Text in Bootstrap Column ? In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl
3 min read
How to use Bootstrap to align labels with content into 4 columns ? The motive of this article is to align the content into four columns where the first two columns denote the labels and its content and the last two columns denote the labels and its content. The class "row" and "col" are used to create a grid which can be represented by a number of rows and columns.
2 min read
How to align nested form rows using Bootstrap 4? Bootstrap is a CSS framework used to design web pages. Bootstrap along with HTML and JavaScript results in interactive web designs. The most recent release is Bootstrap v4.5. Bootstrap has a variety of components and utilities. The Bootstrap components include the form component. Bootstrap has an in
4 min read
How to Create a Basic Two-Column Layout using Bootstrap 5 ? To create a basic two-column layout using Bootstrap, first, we have to enclose your content within a container, then create two divs with classes like col or col-xx, where xx represents the breakpoint for responsive behavior. Place your content inside these columns, and Bootstrap will handle the lay
3 min read
How to col align right in Bootstrap 5 ? 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
3 min read