Bootstrap 5 Clearfix
Bootstrap 5 .clearfix helper class facilitates clearing and fixing the floated content in an element or container by adding the clearfix utility. Basically, without clearfix class, the floated content/elements act like they have a position set to absolute and to fix that, we use the clearfix helper class of bootstrap.
Syntax:
<div class="clearfix"> ...(floating content) </div>
Example 1: In this example, we have 2 identical div elements with the background color set to β.bg-dangerβ class. Both have children, an input tag (for email) which is floated at the start, and a submit button which is floated at the end. Then, one of them is without the β.clearfixβ class and another div is with the β.clearfixβ class.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1" /> < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous" /> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container" > < h1 class = "text-success" > w3wiki </ h1 > < h4 > Bootstrap 5 Clearfix </ h4 > < h5 class = "mt-3" > Without Clearfix </ h5 > < div class = "bg-danger w-25 p-1" > < input type = "text" class = "float-start" placeholder = "email" > < button type = "button" class = "float-end btn btn-success" > Submit </ button > </ div > < h5 class = "mt-5" > With Clearfix </ h5 > < div class = "bg-danger clearfix w-25 p-1" > < input type = "text" class = "float-start" placeholder = "email" > < button type = "button" class = "float-end btn btn-success" > Submit </ button > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, we have 5 buttons and we have applied β.float-startβ, β.float-endβ and β.float-noneβ classes to these buttons and then have applied the β.clearfixβ class to the parent div.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1" /> < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous" /> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container" > < h1 class = "text-success" > w3wiki </ h1 > < h4 >Bootstrap 5 Clearfix</ h4 > < div class = "clearfix bg-danger w-50 p-1" > < button class = "btn btn-warning float-start" > Button 1 </ button > < button class = "btn btn-warning float-end" > Button 2 </ button > < button class = "btn btn-warning float-start" > Button 3 </ button > < button class = "btn btn-warning float-none" > Button 4 </ button > < button class = "btn btn-warning float-end" > Button 5 </ button > </ div > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.2/helpers/clearfix/