In this tutorial, learn how to float button right and left using Bootstrap 5. The short answer is to use the class .float-start for left and .float-end in Bootstrap 5.
Float Button to Left and Right in Bootstrap 5
To float button to left side in Bootstrap 5, you have to add the class .float-start to the button. If you want to float the button to right in Bootstrap 5, you have to add the class .float-end to the button element.
|
1 2 |
<button type="button" class="btn btn-primary float-start">Left Float Button</button> <button type="button" class="btn btn-primary float-end">Right Float Button</button> |
Output
There can be different classes to use in different Bootstrap versions. So, if you want to learn how to float button to left and right positions in bootstrap version 4 and 3, you can read further with examples.
How to Float Buttons to Left and Right in Bootstrap 4
In Bootstrap 4, you have to add the class .float-left to float left the button. If you want to float the button to right side in Bootstrap 4, you have to use .float-right as the class of the button element.
|
1 2 |
<button type="button" class="btn btn-primary float-left">Left Float Button</button> <button type="button" class="btn btn-primary float-right">Right Float Button</button> |
Output
There are two buttons in the above example with positions floating to the left and right.
Bootstrap 3 Floating Buttons
In Bootstrap 3, use the classes .pull-left and .pull-right for floating the buttons to the left-right positions. For floating the button to right side in Bootstrap 3, use .pull-right class to the button element.
|
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
We have added this older versions also in this tutorial. This is because many Bootstrap users still using lower versions for floating buttons.