How to use float in bootstrap 5?
May 03, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. How to use float in bootstrap 5 with code example.
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. These use the same viewport breakpoints as grid system. Note that float utilities have no effect on flex items.
Float right
Use .float-end to float an element to the right of its container.
<div class="float-end" style="background-color: aqua;">This text is on the right.</div><br>Float left
Use .float-start to float an element to the left of its container.
<div class="clearfix">
<div class="float-start" style="background-color: blueviolet;">This text is on the left.</div><br>Float none
Use .float-none to reset any floats that are applied to an element. This is the default value for the float property.
<div class="float-none" style="background-color: brown;">Float Removed</div><br>Example.
Let’s look at the following example to understand how it basically works:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<h2>Example</h2>
<div class="clearfix">
<div class="float-start" style="background-color: blueviolet;">This text is on the left.</div><br>
<div class="float-end" style="background-color: aqua;">This text is on the right.</div><br>
<div class="float-none" style="background-color: brown;">Float Removed</div><br>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>In the above code, we have used .clearfix class to use float in bootstrap
Check the output of the above code example.
All the best 👍
