A button can be created easily using the Bootstrap button classes. However, you need to left align or right align button to give it exact position on a page. But, what is the 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.

How to Right Align Button Using Bootstrap

To right align button using bootstrap, you have to use the class .text-right on a <div> tag and put Bootstrap button inside it.

See the below example to right align the button using bootstrap.

Output

The above example contains a primary button which is in the right 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 inside it.

See the below example to left align the button using bootstrap.

Output

How to Center Align Button 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 example below to create your own center aligned button element.

Output

The above example contains the center aligned button.

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 some HTML elements may overlap to the other elements.

So, use to above given examples to always align a button to the desired positions.

Hope, you like this tutorial of how to left align and right align button using Bootstrap. If you have any query, please comment below or mail us at info@tutorialdeep.com.

Also tell me, which method are you using for button alignment using Bootstrap.

Leave a Reply

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.