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.
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet"
href =
< script src =
</ script >
< link rel = "stylesheet" href = "demo.css" >
</ head >
< body >
< div class = "content container has-text-centered" >
< h1 class = "title has-text-success" >
GeekforGeeks
</ 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 =
< h1 class = "subtitle" style = "font-weight: bold;" >
Welcome to GeeksforGeeks.
</ h1 >
</ div >
< p >Learn Programming, Participate in Contests,
apply for jobs, find video tutorials, and more.
</ p >
</ div >
</ body >
</ html >
|
@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.
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet"
href =
< script src =
</ script >
< link rel = "stylesheet"
href = "demo.css" >
</ head >
< body >
< div class = "content container has-text-centered" >
< h1 class = "title has-text-success" >
GeekforGeeks
</ 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 =
< h1 class = "subtitle" style = "font-weight: bold;" >
GeeksforGeeks
</ h1 >
< p >Learn Programming, Participate in Contests,
apply for jobs, find video tutorials, and more.
</ p >
</ div >
</ div >
</ body >
</ html >
|
@mixin clearfix() { clear : both ;
content : " " ;
display : table;
} .bulma-clearfix-mixin { @include clearfix();
} |
Output:
Reference: https://bulma.io/documentation/utilities/mixins/#clearfix