Bulma Clearfix
Last Updated :
10 Mar, 2022
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 =
< 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 >
|
CSS
@mixin clearfix() {
clear : both ;
content : " " ;
display : table;
}
.bulma-clearfix-mixin {
@include clearfix();
}
|
Output:
Bulma Clearfix
Example 2: Another example illustrating the Bulma Clearfix mixin with right alignment.
HTML
<!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 >
|
CSS
@mixin clearfix() {
clear : both ;
content : " " ;
display : table;
}
.bulma-clearfix-mixin {
@include clearfix();
}
|
Output:
Bulma Clearfix
Reference: https://bulma.io/documentation/utilities/mixins/#clearfix
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...