Bulma Form

admin

7 years ago

Bulma Form – Bulma Css provides form controls to create beautiful form. Here in this article we are going to explain how to create form controls. You can use our online editor to edit and run the code online.

Bulma Form Example

Following topics are covered in this tutorial-

Input
Textarea
Select
Checkbox
Radio
File

Input

To create a simple input box add class input to input box.

Bulma Form Example:

Try it »

If you run the above example it will produce output like this –

Input Color

We can use color modifiers to change the input color for example – is-primary, is-info.

Bulma Change Input Color Example:

 <div class="control">
 
  </div>

<div class="field">
  <div class="control">
 
  </div>
</div>
<div class="field">
  <div class="control">
 
  </div>
</div>
<div class="field">
  <div class="control">
 
  </div>
</div>
<div class="field">
  <div class="control">
 
  </div>
</div>

Try it »

If you run the above example it will produce output something like this-

Input Size

Following sizes are available for input box-

Small Input
Normal Input
Medium Input
Large Input

Form Sizes Example:

<div class="field">
  <div class="control">
    
  </div>
</div>
<div class="field">
  <div class="control">
    
  </div>
</div>
<div class="field">
  <div class="control">
    
  </div>
</div>
<div class="field">
  <div class="control">
    
  </div>
</div>

Try it »

Input States

Following states are available-

Normal
Hover
Focus
Loading

Bulma Input States Example:

<div class="field">
 <div class="control">
  
 </div>
<div class="field">
 <div class="control">
  
</div>
</div>
<div class="field">
 <div class="control">
  
 </div>
</div>
<div class="field">
  <div class="control is-loading">
  
  </div>
</div>

</div>

Try it »

The output of above example will be –

Textarea

class=”textarea” is used to create textarea in Bulma.

Bulma Textarea Example:

Try it »

Textarea Colors

You can change the textarea color using the modifier classes.

Textarea Colors Example:

<div class="field">
  <div class="control">
    
  </div>
</div>
<div class="field">
  <div class="control">
    
  </div>
</div>
<div class="field">
  <div class="control">
    
  </div>
</div>
<div class="field">
  <div class="control">
    
  </div>
</div>
<div class="field">
  <div class="control">
    
  </div>
</div>

Try it »

If you run the above example it will produce output something like this-

Textarea Sizes

You can change the size of textarea by adding the modifier classes. Following sizes are available-

Small– To create Small Textarea Add modifier class – is-small
Normal– By default textareas are normal in bulma so you don’t need to add anything.
Medium Add class is-medium to create medium textarea.
Large– To create large textarea add class is-large.

Textarea State

You can add following states in textarea by adding modifer classes-

Hover – Add class is-hovered for hover effect.
Focused– Add class is-focused to show focused state of textarea.
Loading– Add class is-loading to show the loading state.

Disabled Textarea

If you want to create disabled textarea add attribute – disabled. Here is an example of disabled textarea.

Select Dropdowm

Wrap form select element by class=”select” it will add the style to default select box.

Bulma Select Box Example:

<div class="select">
  
</div>

Try it »

Out of above example-

Multi Select Dropdown

By adding the modifier class is-multiple, you can change the style of default muli select dropdown.

Bulma Multi Select Drop down Example:

 <div class="select is-multiple">
  
  </div>

Select Dropdown Colors

You can use modifiers classes to change the dorpdown colors. In the below example we have used color modifier class – is-primary to change the dropdown menu color.

 <div class="select is-primary">
  
  </div>

Add Icon to Select Dropdown

You can add icon to select dropdown menu. Here is an example of icon-

<div class="field">
  <div class="control has-icons-left">
    <div class="select">
      
    </div>
    <div class="icon is-small is-left">
      <i class="fa fa-globe"></i>
    </div>
  </div>
</div>

The output of above example will look something like this-