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 =
< script src =
</ 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 =
< script src =
</ 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:
Reference: https://bulma.io/documentation/utilities/control-mixins/#control-placeholder