All generic form controls, designed for consistency
The following form controls classes are supported:
Each of them should be wrapped in a
When combining several controls in a form, use the
.field class as a container, to keep the spacing consistent.
This username is available
This email is invalid
With Font Awesome icons
If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon.
By appending the
has-icon-right, the icon will be placed on the right side instead.
If you want to attach controls together, use the
has-addons modifier on the
You can attach inputs, buttons, and dropdowns only.
is-expanded modifier on the element you want to fill up the remaing space (in this case, the input):
has-addons-centered or the
has-addons-right modifers to alter the alignment.
If you want to group controls together, use the
is-grouped modifier on the
is-expanded modifier on the control element you want to fill up the remaining space.
If you want a horizontal form control, use the
is-horizontal modifier on the
control container, in which you include:
control-label for the side label
control for the input/select/textarea container
You can of course use
has-addons for the child elements.
To preserve the vertical alignment of labels with each type and size of control, the
.field-label comes with 4 size modifiers:
.is-normal for any