Bulma Mixins Delete
Last Updated :
06 Oct, 2022
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.
HTML
<!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>
|
CSS
@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
.bulma-delete-mixin {
@include delete;
}
|
Output:
Bulma Delete mixin without modifiers
Example 2: Below example illustrates the Bulma Delete mixin with all 3 modifiers.
HTML
<!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>
|
CSS
@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
.bulma-delete-mixin {
@include delete;
}
|
Output:
Bulma Delete mixin with all 3 modifiers
Reference: https://bulma.io/documentation/utilities/mixins/#delete
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...