How to use float in bootstrap 4?
May 03, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. How to use float in bootstrap 4 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-right to float an element to the right of its container.
<div class="float-right" style="background-color: aqua;">This text is on the right.</div><br>Float left
Use .float-left to float an element to the left of its container.
<div class="clearfix">
<div class="float-left" 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:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Example</h2>
<div class="clearfix">
<div class="float-left" style="background-color: blueviolet;">This text is on the left.</div><br>
<div class="float-right" 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>
</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 👍