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 and 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>

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

Form Control Mixins

Sizes #

Control placeholder #

Support Bulma 😃

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