How to align columns in a row on text end using Bootstrap 5 ?
Last Updated :
30 Nov, 2023
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=
rel="stylesheet">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
</script>
<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>
<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=
rel="stylesheet">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
</script>
<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 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
Share your thoughts in the comments
Please Login to comment...