Form Control Mixins

Mixins for Bulma’s buttons and form controls

In Bulma, the form controls are an essential part of the framework. They comprise the following elements:

  • .button
  • .input
  • .select
  • .file-cta .file-name
  • .pagination-previous .pagination-next .pagination-link .pagination-ellipsis

The control() mixin ensures consistency by providing a set of styles that are shared between all these form controls. You can use it to create additional controls:

.bulma-control-mixin {
  @include control;
  background: deeppink;
  color: white;
}

Example

HTML

<button class="bulma-control-mixin">
  My control
</button>

Sizes #

Controls have a default font size of $size-normal also come in 3 additional sizes, which can be accessed via 3 additional mixins:

  • @include control-small;
    with a font size $size-small
  • @include control-medium;
    with a font size $size-medium
  • @include control-large;
    with a font size $size-large
.bulma-control-mixin {
  &.is-small {
    @include control-small;
  }

  &.is-medium {
    @include control-medium;
  }

  &.is-large {
    @include control-large;
  }
}

Example

HTML

<button class="bulma-control-mixin is-small">
  Small
</button>
<button class="bulma-control-mixin">
  Normal
</button>
<button class="bulma-control-mixin is-medium">
  Medium
</button>
<button class="bulma-control-mixin is-large">
  Large
</button>

Control placeholder #

The control() mixin also exists as Sass placeholder %control

.bulma-control-extend {
  @extend %control;
  background: mediumblue;
  color: white;
}

Example

HTML

<button class="bulma-control-extend">
  My control
</button>

Made with Bulma This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#

Newsletter Features, releases, showcase… stay in the loop!