Bulma Sass 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:

@use "bulma/sass/utilities/controls";

.bulma-control-mixin {
  @include controls.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 controls.control-small;
```
with a font size $size-small
```
@include controls.control-medium;
```
with a font size $size-medium
```
@include controls.control-large;
```
with a font size $size-large

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

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

  &.is-large {
    @include controls.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

@use "bulma/sass/utilities/extends";

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

Example

HTML

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

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Bulma Sass Form Control Mixins

Mixins for Bulma’s buttons and form controls

Sizes #

Control placeholder #

How to support Bulma