Bulma Control placeholder

Last Updated : 18 Oct, 2022

In this article, we’ll learn about the Bulma Control placeholder. The Bulma Control placeholder is an extended version of the control() mixin. The control() mixin is also used as Sass placeholder( %control).

Bulma Control placeholder 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:

<div class="bulma-control-extend">
    //statement
</div>

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

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 Control placeholder.

index.html

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="style.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 Control placeholder</p> 
    </div>   
    <div> 
        <button class="bulma-control-extend"> 
            Control placeholder 
        </button> 
    </div> 
</body>   
</html>

Style.css:

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: Below example illustrates the Bulma Control placeholder.

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="style.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 Control placeholder</p> 
    </div> 
    
    <div> 
        <button class="bulma-control-extend-1"> 
            Control placeholder 1 
        </button> 
    </div> 
    <div> 
        <button class="bulma-control-extend-2"> 
            Control placeholder 2 
        </button> 
    </div> 
    <div> 
        <button class="bulma-control-extend-3"> 
            Control placeholder 3 
        </button> 
    </div> 
</body>   
</html>

style.css

CSS

.text-success { 
    color: darkgreen; 
} 
%control-1 { 
    border-radius: 7px; 
    font-size: 14px; 
    margin: 20px; 
} 
.bulma-control-extend-1 { 
    @extend %control-1; 
    background: darkgreen; 
    color: white; 
} 
  
%control-2 { 
    border-radius: 11px; 
    font-size: 24px; 
    margin: 20px; 
} 
.bulma-control-extend-2 { 
    @extend %control-2; 
    background: green; 
    color: white; 
} 
  
%control-3 { 
    border-radius: 14px; 
    font-size: 34px; 
    margin: 20px; 
} 
.bulma-control-extend-3 { 
    @extend %control-3; 
    background: lightgreen; 
    color: white; 
} 