Open In App

Bulma Form Control mixins sizes

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see the Bulma Form Control mixins sizes. The form control mixin size is a mixin that is used to create buttons and form controls in Bulma. Controls also have 3 more sizes other than normal size and they are as follows small, medium, and large.

Bulma Form Control mixins sizes 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-mixin is-{size}">
    //statement
</div>

.bulma-control-mixin
{
      &.is-{size} 
      {
        @include control-{size};
      }
}

Where {size} denotes {small, medium, large}.

Parameter: This mixin does not accept any parameter.

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 Form Control mixins in small, and large sizes.

  • index.html

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>
        <p class="title is-1 text-success">
            GeekforGeeks
        </p>
        <p class="subtitle is-3">
            Bulma Form Control Mixins Sizes
        </p>
    </div>
  
    <div>
        <button class="bulma-control-mixin is-small">
            Form Control Small
        </button>
        <button class="bulma-control-mixin is-large">
            Form Control Large
        </button>
    </div>
</body>
  
</html>


  • gfgstyles.scss

CSS




.text-success {
  color: darkgreen;
}
  
@mixin control-small() {
  border-radius: 7px;
  font-size: 14px;
  background: green;
  color: white;
}
  
@mixin control-large() {
  font-size: 28px;
  border-radius: 7px;
  background: green;
  color: white;
}
  
.bulma-control-mixin {
  &.is-small {
    @include control-small;
  }
  &.is-large {
    @include control-large;
  }
}


  • gfgstyles.css

CSS




.text-success {
  color: darkgreen;
}
.bulma-control-mixin.is-small {
  border-radius: 7px;
  font-size: 14px;
  background: green;
  color: white;
}
.bulma-control-mixin.is-large {
  font-size: 28px;
  border-radius: 7px;
  background: green;
  color: white;
}


Output:

 

Example 2: Below example illustrates the Bulma Form Control mixins sizes mixin – All sizes.

  • index.html

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>
        <p class="title is-1 text-success">
            GeekforGeeks
        </p>
        <p class="subtitle is-3">
            Bulma Form Control Mixins Sizes
        </p>
    </div>
  
    <div>
        <button class="bulma-control-mixin is-small">
            Form Control Small
        </button>
        <button class="bulma-control-mixin">
            Form Control Normal
        </button>
        <button class="bulma-control-mixin is-medium">
            Form Control Medium
        </button>
        <button class="bulma-control-mixin is-large">
            Form Control Large
        </button>
    </div>
</body>
  
</html>


  • gfgstyles.scss

CSS




.text-success {
  color: darkgreen;
}
$control-radius: 10px;
$control-border-width: 1px;
  
$control-height: 2.5em;
$control-line-height: 1.5;
  
$control-padding-vertical: calc(0.5em - #{$control-border-width});
$control-padding-horizontal: calc(0.75em - #{$control-border-width});
  
@mixin control() {
  -moz-appearance: none;
  -webkit-appearance: none;
  align-items: center;
  border: $control-border-width solid transparent;
  border-radius: $control-radius;
  box-shadow: none;
  display: inline-flex;
  font-size: 18px;
  height: $control-height;
  justify-content: flex-start;
  line-height: $control-line-height;
  padding-bottom: $control-padding-vertical;
  padding-left: $control-padding-horizontal;
  padding-right: $control-padding-horizontal;
  padding-top: $control-padding-vertical;
  position: relative;
  vertical-align: top;
  margin: 10px;
}
  
@mixin control-small() {
  border-radius: 7px;
  font-size: 14px;
}
  
@mixin control-medium() {
  font-size: 22px;
}
  
@mixin control-large() {
  font-size: 28px;
}
  
.bulma-control-mixin {
  @include control;
  background: darkgreen;
  color: white;
}
  
.bulma-control-mixin {
  &.is-small {
    @include control-small;
  }
  
  &.is-medium {
    @include control-medium;
  }
  
  &.is-large {
    @include control-large;
  }
}


  • gfgstyles.css

CSS




.text-success {
  color: darkgreen;
}
.bulma-control-mixin {
  -moz-appearance: none;
  -webkit-appearance: none;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  display: inline-flex;
  font-size: 18px;
  height: 2.5em;
  justify-content: flex-start;
  line-height: 1.5;
  padding-bottom: calc(0.5em - 1px);
  padding-left: calc(0.75em - 1px);
  padding-right: calc(0.75em - 1px);
  padding-top: calc(0.5em - 1px);
  position: relative;
  vertical-align: top;
  margin: 10px;
  background: darkgreen;
  color: white;
}
.bulma-control-mixin.is-small {
  border-radius: 7px;
  font-size: 14px;
}
.bulma-control-mixin.is-medium {
  font-size: 22px;
}
.bulma-control-mixin.is-large {
  font-size: 28px;
}


Output:

 

Reference: https://bulma.io/documentation/utilities/control-mixins/#sizes 



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