PUBLISHED ON: JUNE 8, 2021
How can I get my Bootstrap buttons to right align?
Buttons are important components of a webpage. The buttons are created with <button> tags and it is customized using .btn class. The buttons are positioned on the left side of the webpage by default.
Example: Buttons with the default position
In this example, we have added a button to the webpage which is left-aligned by default.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<h3> Buttons with default position </h3>
<button class="btn btn-primary ">Submit</button>
</body>
</html>
Output:
As you can see in the output given below that the button is left-aligned on the web page.
Aligning button to the right
We can align the buttons to the right side of the page using the float utility class. The float classes are used to float the element to the right or left.
Example: Right align the button using float class
To right-align the button use .float-end with the .btn class in <button> tag. Here is an example to demonstrate this.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<h3> Right aligning the button</h3>
<button class="btn btn-primary float-end ">Submit</button>
</body>
</html>
Output:
As you can see in the picture that the buttons have been successfully aligned.
Conclusion
So we can easily align the buttons to the right side of the page using float classes in bootstrap.
