Signup/Sign In
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:

left right aligned

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.

flexbox alignment

Conclusion

So bootstrap float classes and flexbox alignment class provides the solution to left align and right align within <div> using bootstrap 5.



About the author: