Last Updated on July 16, 2021 by Roshan Parihar
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.
|
1 2 |
<button type="button" class="btn btn-primary pull-left">Left Float Button</button> <button type="button" class="btn btn-primary pull-right">Right Float Button</button> |
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.
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:-
|
1 2 3 |
<div class="text-center"> <button type="button" class="btn btn-primary">Center Align Button</button> </div> |
Output
DOWNLOAD Free Bootstrap CHEAT SHEET
You May Also Like to Read