Last Updated on December 31, 2024 by Roshan Parihar
Learn how to align button to right side in Bootstrap. The short answer is: in Bootstrap 5, use the class .text-end to align button to right side. You can also use the CSS text-align property for alignment of buttons to the right side.
How to Align Button to Right in Bootstrap 5, 4, and 3
There can be different classes in different versions of Bootstrap. Let’s find out with the examples given below.
Align Button to Right in Bootstrap 5
To align button to right side in Bootstrap 5, you have to first place the button inside the <div> element. After that, use the class .text-end as given below.
|
1 2 3 4 |
<div class="text-end"> <p>Right Alignment using <code>.text-end</code> class in Bootstrap 5</p> <button type="button" class="btn btn-primary">Right Align Button</button> </div> |
Output
Right Button Alignment in Bootstrap 4
For button alignment to right side in Bootstrap 4, you have to place the button inside the div and use the class .text-right as given below.
|
1 2 3 4 |
<div class="text-right"> <p>Right Alignment using <code>.text-right</code> class in Bootstrap 4</p> <button type="button" class="btn btn-primary">Right Align Button</button> </div> |
Output
Alignment in Bootstrap 3
For right alignment of button in Bootstrap, you have to place it inside the <div> element and use the class .text-right. It is the pre-made class of Bootstrap to position the content (e.g. text, button, etc.) to the right side. See the example below showing the added class to position.
|
1 2 3 |
<div class="text-right"> <button type="button" class="btn btn-primary">Right Aligned Button</button> </div> |
Output
The above example uses the Bootstrap button classes to create a button. After that, it applies the .text-right class for button alignment to the right side.
Position Using CSS
In addition to the above method, you can also use the CSS text-align property for button alignment. To position button to the required side, you have to first insert a button inside the <div> element and pass the value right for this property. See the below example to learn the method.
|
1 2 3 4 5 6 7 8 |
<style> .mybtn-right{ text-align: right; } </style> <div class="mybtn-right"> <button type="button" class="btn btn-primary">Right Aligned Button</button> </div> |
Output
The above example showing the right aligned button using CSS. Similarly, you place more buttons inside the <div> element to move them to the required position.