What is Bootstrap 5 clearfix utility for?
Sometimes your content overflows the element like a div, paragraph etc. Bootstrap 5 has a built-in utility class to fix that issue.
For example, have a look at this image below with overflow content:
Using clearfix utility in Bootstrap 5
By using the Bootstrap 5 clearfix utility class, you can fix that issue easily. In the example below, we have an image and some text. The image is aligned right while the text is toward the left.
We used the same markup/CSS for both except the second one is assigned the BS 5 clearfix utility.
Code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
.imgfloat {
float: right;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<div class="border">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
<img class="imgfloat" src="images/aurora.jpg" width="250" height="250">
</div>
<h2 style="clear:right">BS 5 Clearfix</h2>
<div class="border clearfix">
<img class="imgfloat" src="images/aurora.jpg" width="250" height="250">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
</html>
After copying the code, do not forget to change the image path as per your system.