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
<!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:
.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.
<!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
.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;
}
Output:
