Last Updated on July 16, 2021 by Roshan Parihar
In this tutorial, learn how to align button to right side in Bootstrap. The short answer is to place the button inside the <div> element and use the Bootstrap class .text-right to align button to right side.
You can also use the CSS text-align property to align button to the right position. Let’s find out with the examples given below using CSS and Bootstrap.
How to Align Button to Right Using Bootstrap
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 Button 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.
DOWNLOAD Free Bootstrap CHEAT SHEET
You May Also Like to Read