While developing any application, it is essential to consider the proper alignment and position of the components. This approach helps developers to make the application more professional. The alignment refers to the arrangement of items. More specifically, in Bootstrap, several classes can be used to adjust the element’s alignment, such as “text-right”, “float-right”, and many more.
This write-up will instruct you on how to align right in Bootstrap.
How to align-right in Bootstrap?
There are several ways to right-align items in Bootstrap. Some of them are listed below:
-
- float-right Class
- justify-content-end
- align-items-end
- align-self-end
- ml-auto
- text-right
Method 1: How to align-right in Bootstrap Using the “float-right” Class?
In Bootstrap, the “float-right” class positioned the element on the right side.
Example
In this example, we will use the “float-right” class in the “<div>” element:
Output
Method 2: How to align-right in Bootstrap Using the “justify-content-end” Class?
The Bootstrap class “justify-content-end” is used with flexible items. So, the “d-flex” class is also added to the “<div>” element:
using justify-content-end
</div>
Output
Method 3: How to align-right in Bootstrap Using the “align-items-end” Class?
The “align-items-end” is the utility class of the “align-items”. These classes are used to adjust the alignments of the flex items. So, the d-flex class makes the element’s display flex. Then, inside this “<div>” container, add two more <div> elements:
<div>Item 1</div>
<div>Item 2</div>
</div>
Output
Method 4: How to align-right in Bootstrap Using the “align-self-end” Class?
The “align-self-end” class is utilized to set the single items’ alignment to the right.
Example
Let’s understand with the help of the below-stated example:
-
- Add a “<div>” element and assign it the “d-flex” and “flex-column” classes.
- Inside the “<div>” element, specify three sub-containers.
- Assign the “align-self-end” class to the second “<div>” element:
<div>line 1</div>
<div class="align-self-end">line 2</div>
<div>line 3</div>
</div>
Output
Method 5: How to align-right in Bootstrap Using the “ml-auto” Class?
The “ml-auto” class adds margin space at the element’s left. To utilize it:
-
- Specify the “<div>” element with the class “d-flex”.
- Then, create a button using the “btn”, “btn-outline-primary”, and “ml-auto” classes:
<p class="btn btn-outline-primary ml-auto">ml-auto button</p>
</div>
Output
Method 6: How to align-right in Bootstrap Using the “text-right” Class?
The “text-right” class aligns the text on the right side. In the below example, add a “<p>” element and assign it a “text-right” class:
Output
That was all about setting the right alignment in Bootstrap.
Conclusion
Multiple classes in Bootstrap are utilized to set the right text alignment, such as “float-right”, “justify-content-end”, “align-items-end”, “align-self-end”, “ml-auto”, and “text-right”. However, some classes work on the elements with display “flex”. This post has illustrated how to align right in Bootstrap using multiple methods.
