PUBLISHED ON: JUNE 10, 2021
How to Left align and right align within div in Bootstrap 5
When we add elements to a <div>, they are generally placed at the left of the page. We can change the alignment of the elements using alignments utilities. Let us explore the classes used to align the div element to left and right.
Float Class
The float classes in the bootstrap are used to float the element to the left or right of the containing block.
- The .float-start class is used to left-align the elements
- The .float-end class is used to right-align the elements.
Example: Left align and Right align using Float class
Here, we have used the float classes to align the element within <div>. If you are using a non grid element then don't forget to wrap float classes under the .clearfix class.
<!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.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="clearfix bg-secondary">
<div class="float-start">left align</div>
<div class="float-end">Right align</div>
</div>
</body>
</html>
Output:
So you can see in the output that the elements are aligned to the left and right sides.
Flexbox Alignment utilities
The flexbox alignment utilities can also be used to align the elements within <div> to left and right.
The .justify-content-between class is used for this purpose.
Example: Left align and Right align using Flexbox alignment utilities
Here we have used the .justify-content-between class to align the elements to left and right.
<!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.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex justify-content-between bg-light">
<div >Left align</div>
<div>Right align</div>
</div>
</body>
</html>
Output
As we can see in the output that both the elements are aligned to either side.
Conclusion
So bootstrap float classes and flexbox alignment class provides the solution to left align and right align within <div> using bootstrap 5.
