Open In App

Bulma Mixins Delete

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 06 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads