Align Button to Right Side Using Bootstrap and CSS

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.

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.

Bonus: download a Free Bootstrap CHEAT SHEET that will show you 20+ most important examples to learn in Bootstrap.

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.

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