Open In App

Bulma Extends

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma uses Sass mixins to create the CSS output and they are mainly used within the context of the Bulma framework.

In this article, we will know about Bulma Extends. Bulma Extends are the utilities that help the users to use the @extend version of corresponding mixins. Since mixins allow sharing but they repeat CSS rules issues whenever they are called. So Bulma uses the @extend rule to share codes that are used by Bulma Placeholders. Some of Bulma Sass placeholders are as follows:

  • %control
  • %unselectable
  • %arrow
  • %block
  • %delete
  • %loader
  • %overlay
  • %reset

There is no specific class provided by Bulma instead, we can create our class and then style the element with the help of SASS mixins.

Syntax:

<div class="bulma-{placeholderName}-extend">
    //statement
</div>

.bulma-{placeholderName}-extend {
    @extend %{placeholderName};
}

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 Extends.

HTML




<!DOCTYPE html>
<html lang="en">
    
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <link rel="stylesheet" href="styles.css">
</head>
    
<body class="content container has-text-centered">
    <div>
        <p class="title is-1 text-success">
          GeekforGeeks
        </p>
        <p class="subtitle is-3">Bulma Extends</p>
    </div>
    
    <div>
        <button class="bulma-control-extend">
            Control placeholder
        </button>
    </div>
</body>  
</html>


CSS code:

CSS




.text-success {
      color: darkgreen;
}
%control {
      border-radius: 7px;
      font-size: 14px;
      margin: 20px
}
.bulma-control-extend {
      @extend %control;
      background: darkgreen;
      color: white;
}


Output:

 

Example 2: Another example illustrates the Bulma Extends.

HTML




<!DOCTYPE html>
<html lang="en">
    
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <link rel="stylesheet" href="styles.css">
</head>
    
<body class="content container has-text-centered">
    <div>
        <p class="title is-1 text-success">
          GeekforGeeks
        </p>
        <p class="subtitle is-3">Bulma Extends</p>
    </div>
    
    <div>
        <button class="bulma-reset-extend">
            Reset placeholder
        </button>
    </div>
</body>  
</html>


CSS code:

CSS




.text-success {
      color: darkgreen;
}
%reset {
      appearance: none;
      background: 0 0;
      border: none;
      font-family: inherit;
      font-size: 1em;
      margin: 0;
      padding: 0;
}
.bulma-reset-extend {
      @extend %reset;
      background: darkgreen;
      color: white;
}


Output:

 

Example 3: Another example illustrates the Bulma Extends.

HTML




<!DOCTYPE html>
<html lang="en">
    
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <link rel="stylesheet" href="styles.css">
</head>
    
<body class="content container has-text-centered">
    <div>
        <p class="title is-1 text-success">
          GeekforGeeks
        </p>
        <p class="subtitle is-3">Bulma Extends</p>
    </div>
    
    <div class="text-success-p" style="background-color:green;">
        <p class="bulma-block-mixin">
            This header has a spacing of margin-bottom.
        </p>
        <p class="bulma-block-mixin">
            This header too.
        </p>
        <p class="bulma-block-mixin">
            This does not because it's the last header/child.
        </p>
    </div>
</body>  
</html>


CSS code:

CSS




.text-success {
      color: darkgreen;
}
.text-success-p {
      color: white;
}
@mixin block($spacing) {
    margin-bottom: $spacing;
}
%block {
      @include block(4rem);
}
.bulma-block-extend {
    @extend %block;
}


Output:

 

Reference: https://bulma.io/documentation/utilities/extends/



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