How to use Bootstrap 5 col ms-auto In Bootstrap
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:
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