Bulma Mixins Delete

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=
"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="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:

Example 2: Below example illustrates the Bulma Delete mixin with all 3 modifiers.

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="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:

Explore