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
field container is a simple container for:
- a text
- a form
- an optional
This container allows form fields to be spaced consistently.
control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, it can only contain the following elements:
You can append one of 2 modifiers on a control:
You also need to add a modifier on the icon:
icon is-left if
has-icons-left is used
icon is-right if
has-icons-right is used
The size of the input will define the size of the icon container.
You can append icons to select dropdowns as well.
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.
If you want to attach controls together, use the
has-addons modifier on the
You can attach inputs, buttons, and dropdowns only.
It can be useful to append a static button.
is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):
If you want a full width select dropdown, pair
control is-expanded with
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-grouped-centered or the
is-grouped-right modifers to alter the alignment.
is-expanded modifier on the control element you want to fill up the remaining space with.
If you want a horizontal form control, use the
is-horizontal modifier on the
field container, in which you include:
field-label for the side label
field-body for the input/select/textarea container
You can use
has-addons for the child elements.
Do not enter the first zero
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