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 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/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class="container text-center"> < div class = "mt-1" > < h2 class = "text-success" > w3wiki </ 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container text-center " > < div class = "mt-1" > < h2 class = "text-success" > w3wiki </ 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container text-center " > < div class = "mt-1" > < h2 class = "text-success" > w3wiki </ 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: