How to Float Button Right and Left Using Bootstrap

In this tutorial, learn how to float button right and left using Bootstrap. The short answer is to use the Bootstrap classes .pull-right and .pull-left to move buttons to right and left positions.

You need to just add the class and your button is ready in the required positions. See the example given below to float buttons.

How to Float Button Right and Left Using Bootstrap

The above example contains the buttons float to the right or left position.

Test it Live

Output



Probably, you may also want to move the button to the center position. However, there is no float class in Bootstrap to position the button to the center location.

But, you can use other methods and classes of Bootstrap to center align button. Let’s find out how you can center align the button in Bootstrap with the example given below.

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

Center Align Button in Bootstrap

To center align button, you need to place the button inside the <div> element and use the Bootstrap class .text-center to center align the button.

See the example given below showing the center-aligned button:-

Test it Live

Output

DOWNLOAD Free Bootstrap CHEAT SHEET

You May Also Like to Read