How to Left Align and Right Align Button Using Bootstrap?

A button can be created easily using the Bootstrap button classes. However, you need to left align or right align button to give its exact position on a page. But, what is the best way to left align button and right-align button using bootstrap class?

Well, you can easily align the button to the right position or to the left position with a single use of a bootstrap class.

Check the examples given below to find out different ways of Bootstrap button position.

How to Left Align Button Using Bootstrap

To left align button using bootstrap, you can use a bootstrap class .text-left on a <div> tag and put Bootstrap button position inside it.

See the below example for left alignment of button using bootstrap.

Test it Live


Right Align Button Using Bootstrap

For right alignment of button using bootstrap, you have to use the class .text-right on a HTML div tag for Bootstrap button right alignment.

See the below example for Bootstrap align right method inside the div element.

Test it Live


The above example contains a primary button which is in the right position.

Center Alignment Using Bootstrap

In addition to above all, you can also align the button element center using Bootstrap. To center align the button, you have to use .text-center as the class of the div element.

See the below example for center alignment of button element.

Test it Live


The above example contains the center aligned button.

Position Bootstrap Button Using Pull-right, pull-left classes

With the above all methods, there is another method where you have to use Bootstrap .pull-right and .pull-left classes for Bootstrap button position right and left. However, this method is not recommended to align the button using Bootstrap.

Test it Live


The above examples give the button alignment as required to the left and right.

Conclusion: Do Not Use pull-right and pull-left For Button Alignment

If you are using the class .pull-right or .pull-left, you are actually using the wrong class of bootstrap to align the button. Because these classes may break your design and overlap and float elements with other HTML elements.

So, use the recommended methods which uses the classes .text-left, .text-right and .text-center to always align a button to the desired positions.

Hope, you like this tutorial of how to align button to the left, right and center position using Bootstrap. If you have any query, please comment below.

Also tell me, which method are you using for button alignment using Bootstrap. Please leave a comment below.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Download Link Will be Send to Your Email id