Left Align, Right Align, and Center Align Button Using Bootstrap

In this tutorial, learn how to left align, right align, and center align button using Bootstrap. The short answer is: first wrap the buttons inside the <div> element and use the Bootstrap classes given below to align the buttons:-

  • .text-left: To align button left position in Bootstrap.
  • .text-right: Can be used to align button right position.
  • .text-center: To align button center position.

Let’s find out how to use these classes for button alignment with the examples given below.

How to Left Align Button Using Bootstrap

To left align button using Bootstrap, you have to first wrap the button inside the <div> and use the Bootstrap class .text-left as given below.

Test it Live

Output

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

Right Align Button Using Bootstrap

If you want to align button right using Bootstrap, you have to first place the button inside the <div> element and use the class .text-right as given below.

Test it Live

Output

The above example contains a right align button position. You can also use this method to position your button to the right side in the div element.

Center Align Button Using Bootstrap

In addition to above all, you can also align button center position using Bootstrap. To center align the button, you have to first wrap the button inside the <div> element and use .text-center as given below.

Test it Live

Output

The above example contains the center-aligned button.

How to Position Two Buttons to Left and Right on the Same Line

When you want to align the two button on the same line, you can use Bootstrap .pull-right and .pull-left classes to move the button to left and right position as given below:

Test it Live

Output


The above example will move the button to the right or left position. However, there is no float class to position the button to the center position.

The above method is not recommended for anyone to align buttons when they are not in the same line. If the buttons are not in the same line and you use the above two classes, the button may overlap with other elements.

Frequently Asked Questions (FAQS)

1. How do I align a button to the left in bootstrap?

Answer: You have to place the button inside the <div> element and use the Bootstrap class .text-left to align the button to the left in Bootstrap.

2. How do you align a button?

Answer: To align a button, you have to place the button inside the <div> element. After that, add the Bootstrap class to the <div> element like .text-left for left alignment, .text-right for right alignment, and .text-center for center alignment.

3. How do I align a button to the right in bootstrap?

Answer: Firstly, place the button inside the <div> element. After that, and add the Bootstrap class .text-right to <div> element to align the button to the right position in Bootstrap.

4. How do I center align a button in bootstrap 4?

Answer: To center align a button, place the button inside the <div> element and use the Bootstrap class .text-center to <div> element to align the button to center align a button in Bootstrap.

Conclusion

Do not use pull-right and pull-left for button alignment when they are not on the same line. If you use the class .pull-right or .pull-left with buttons not in the same line, you are using the wrong classes of Bootstrap for the alignment of buttons. Because these classes may break your design and your buttons may overlap with other HTML elements.

So, I recommend you always use the Bootstrap classes .text-left, .text-right, and .text-center to align the button to the required positions when they are not in the same line.

I hope you like this post on how to left align, right align, and center align button using Bootstrap.

Also, if you want to get the video form of our tutorials, you can subscribe to our YouTube Channel to learn more.

DOWNLOAD Free Bootstrap CHEAT SHEET

Related Posts