Bulma Form Complete Reference
Bulma is a free, open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. It allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.
The Form in Bulma contains various classes & components which include the text input, select dropdown, textarea, checkbox, etc. These form controls are used to validate the form fields, along with maintaining consistency in the design.
The list of complete references for the Bulma Form is given below:
Bulma Form
The Bulma framework supports and allows the users to build forms using Bulma form controls. There are various classes used in the form controls and they are discussed below.
Element |
Description |
---|---|
Bulma Form field |
The Bulma form field is a simple container that contains a label element, a Bulma form control, and an optional help text. The field container maintains consistent spacing between the form fields. |
Bulma Form control |
This class is used as a versatile block container which consists of input, level, textarea, and select elements. |
Bulma Form icons |
Bulma provides icon classes to add icons to a form, one can append either has-icons-left or has-icons-right or both modifiers on the form control and is-left and/or is-right modifier(s) on the icon container depending on the modifiers applied on the form control. |
Bulma Form addons |
Bulma Form has only three addons to be added i.e, inputs, buttons, and dropdown with the field container of form. |
Bulma Form group |
Bulam form group classes are used to group the form fields together. There are multiple ways to group form field like center, right, or multiline, etc. |
Bulma Horizontal form |
These classes are used to create forms horizontally (forms are aligned vertically by default). The labels are aligned next to the input fields |
Bulma Disabled form |
There is no predefined class to disable a form, we can simply use the HTML disabled attribute for that. |
Bulma Form Variables |
Bulma Form variables are used to customize form labels in their own ways i.e. user can set label colors, weight, and size |
Bulma Input
Bulma Input is used for getting text input from the user. The Bulma Input elements are available in different colors, different styles, different sizes, and different states.
Element |
Description |
---|---|
Bulma Input Colors |
There are different types of classes to set the input color. |
Bulma Input Sizes |
Bulma Input Size is used to set the size of input fields. There are four different input sizes available in Bulma that are small, medium, normal, and large. |
Bulma Input Styles |
Bulma Input style is used to set the style on input fields. There is only a single style that is used in an input field. This style is used to create a rounded corner input field. |
Bulma Input States |
Bulma Input States are used to set the different states of input fields. There are many different states available for input fields that are – normal, hovered, focused, loading, static, disabled, and readonly. |
Bulma Input with Font Awesome icons |
Bulma Input States are used to set the different states of input fields. There are many different states available for input fields that are – normal, hovered, focused, loading, static, disabled, and readonly. |
Bulma Input Variables |
Bulma input variables are the SCSS variables that are compiled to CSS, which in turn, are utilized to add styling in various customization options. These variables are declared once to store data that can be reused whenever required. |
Bulma Textarea
Textarea is for user input or comments. Bulma textarea elements are available in different colors, different styles, different sizes, and different states.
Element |
Description |
---|---|
Bulma Textarea Colors |
The Bulma Textarea Color is used to set the border color of textarea element. |
Bulma Textarea Sizes |
The Bulma Textarea Size is used to set the size of the textarea field. There are four different input sizes available in Bulma that are – small, normal, medium, and large. |
Bulma Textarea States |
Bulma Textarea States are used to set the different states of Textarea fields. There are many different states available for Textarea fields that are – normal, hovered, focused, loading, disabled, readonly, and fixed size. |
Bulma Select
The select
element is used to create a drop-down list. Bulma select elements are available in different colors, different styles, different sizes, and different states.
Element |
Description |
---|---|
Bulma Multiple select |
Bulma multiple select is used to create a style of multiple select dropdown items. The multiple select items are created by using is-multiple modifiers by using the HTML select multiple attributes. |
Bulma Select Colors |
The Bulma select color is used to set the color on the select element. The color is applied on the border and dropdown icon of the select menu. |
Bulma Select Styles |
Bulma select style is used to set the style on the select elements. There is only a single style that is used in the select element. This style is used to create a rounded corner on the select element. |
Bulma Select Sizes |
Bulma Select Size classes are used to set the size of the select dropdown. The select element has 4 different sizes: small, normal, medium, and large. |
Bulma Select States |
Bulma Select State classes are used to style the select dropdown according to a specific state. |
Bulma Select icons |
we can add icons to the select dropdown. To add an icon to the select dropdown we can wrap the select container in a control div and use the has-icons-left modifier on the control div. |
Bulma Checkbox
The checkboxes allow the users to select multiple options from a list of options. Bulma provides different
Bulma Radio
Radio buttons are mutually exclusive buttons, that is, you can select only one option in a radio button group. The Radio element is a simple wrapper around the radio input. Bulma doesn’t style the radio buttons to ensure cross-browser compatibility. To make sure radio buttons are grouped together, they should have the same name attribute.
Bulma File
The file element is used to upload custom file input. The ‘file’ component comprises of several sub-elements that we have to add exclusively to design our content well.
Element |
Description |
---|---|
Bulma File Modifiers |
Bulma provides a set of modifiers that use to style file input elements. |
Bulma File Colors |
There are ten different types of file color classes provided by bulma we can used to set the file colors. |
Bulma File Sizes |
Bulma provides the different sizes of the File element we can use it. The File element comes in 4 different sizes: small, normal, medium, and large. |
Bulma File Alignment |
By default, the Bulma file element set to left aligned but bulma provides the classes to set file element to centered or right align. |
Bulma File with JavaScript |
Bulma doesn’t provide any built in javascript package. We can use JavaScript to make file input more interective. |
Bulma File Variables |
Bulma file variables are used to customize file inputs in own ways. |
Contact Us