Last Updated on December 30, 2024 by Roshan Parihar
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.