Bulma Clearfix
In this article, we’ll learn about Bulma Clearfix. It is a mixin that adds a ::after pseudo-element with a clear: both rule. Using this mixin will cause the elements after the floating element to flow around it.
There is no specific class given by Bulma for creating a reset button mixin. We need to create our own class and style it using SASS mixins.
Syntax:
.bulma-clearfix-mixin { @include clearfix; }
Example 1: The below example illustrates the Bulma Clearfix mixin.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> < script src = "https://use.fontawesome.com/releases/v5.15.4/js/all.js" > </ script > < link rel = "stylesheet" href = "demo.css" > </ head > < body > < div class = "content container has-text-centered" > < h1 class = "title has-text-success" > GeekforBeginner </ h1 > < h1 class = "subtitle" >Bulma Clearfix Mixin</ h1 > </ div > < div class = "container" > < div class = "bulma-clearfix-mixin" > < img height = "80" width = "80" style = "float: left;" src = "https://media.w3wiki.net/wp-content/uploads/20220221132017/download.png" > < h1 class = "subtitle" style = "font-weight: bold;" > Welcome to w3wiki. </ h1 > </ div > < p >Learn Programming, Participate in Contests, apply for jobs, find video tutorials, and more. </ p > </ div > </ body > </ html > |
CSS
@mixin clearfix() { clear : both ; content : " " ; display : table; } .bulma-clearfix-mixin { @include clearfix(); } |
Output:
Example 2: Another example illustrating the Bulma Clearfix mixin with right alignment.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> < script src = "https://use.fontawesome.com/releases/v5.15.4/js/all.js" > </ script > < link rel = "stylesheet" href = "demo.css" > </ head > < body > < div class = "content container has-text-centered" > < h1 class = "title has-text-success" > GeekforBeginner </ h1 > < h1 class = "subtitle" >Bulma Clearfix Mixin</ h1 > </ div > < div class = "container" > < div class="bulma-clearfix-mixin has-background-light p-4"> < img height = "80" width = "80" style = "float: right; border-radius: 5rem;" src = "https://media.w3wiki.net/wp-content/uploads/20220221132017/download.png" > < h1 class = "subtitle" style = "font-weight: bold;" > w3wiki </ h1 > < p >Learn Programming, Participate in Contests, apply for jobs, find video tutorials, and more. </ p > </ div > </ div > </ body > </ html > |
CSS
@mixin clearfix() { clear : both ; content : " " ; display : table; } .bulma-clearfix-mixin { @include clearfix(); } |
Output: