In this article, we’ll learn about Bulma Delete mixin. The Delete mixin is an Element mixin used to create a square inline-block element so that users can use them for storing an icon, or group of icons of any type or category in them. This mixin has 3 types of modifiers that can be used to modify the content of the element. These modifiers are as follows:
- is-small
- is-medium
- is-large
Bulma Delete Class: For creating a mixin, no specific class is provided by Bulma, instead we can create our class and then style the element with the help of SASS mixins.
Syntax:
<button class="bulma-delete-mixin [modifier]"> // Statement </button> .bulma-delete-mixin { @include delete; }
Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.
Example 1: Below example illustrates the Bulma Delete mixin without modifiers.
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet" href =
< script src =
</ script >
< link rel = "stylesheet"
href = "gfgstyles.css" >
</ head >
< body class = "content container has-text-centered" >
< div >
< h1 class = "title is-1 has-text-success" >
GeekforGeeks
</ h1 >
< h1 class = "subtitle is-3" >
Bulma Delete Mixins
</ h1 >
</ div >
< div >
< button class = "bulma-delete-mixin" >
</ button >
</ div >
</ body >
</ html >
|
@charset "utf-8" ;
@import "../node_modules/bulma/bulma.sass" ;
.bulma-delete-mixin { @include delete;
} |
Output:
Example 2: Below example illustrates the Bulma Delete mixin with all 3 modifiers.
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet" href =
< script src =
</ script >
< link rel = "stylesheet"
href = "gfgstyles.css" >
</ head >
< body class = "content container has-text-centered" >
< div >
< h1 class = "title is-1 has-text-success" >
GeekforGeeks
</ h1 >
< h1 class = "subtitle is-3" >
Bulma Delete Mixins
</ h1 >
</ div >
< div >
< button class = "bulma-delete-mixin is-small" >
</ button >
< button class = "bulma-delete-mixin is-medium" >
</ button >
< button class = "bulma-delete-mixin is-large" >
</ button >
</ div >
</ body >
</ html >
|
@charset "utf-8" ;
@import "../node_modules/bulma/bulma.sass" ;
.bulma-delete-mixin { @include delete;
} |
Output:
Reference: https://bulma.io/documentation/utilities/mixins/#delete