Bulma Form Control

Last Updated : 02 Feb, 2022

Bulma is a free and open-source CSS framework that is used to build beautiful and responsive websites using the pre-styled elements and components that comes with Bulma.

In this article, we will learn about the Bulma Form control class. Bulma form control is a container with its display property set to block. The Bulma control class is used for a block container that enhances single form controls. The Bulma Form container can contain only four elements namely input, select, button, icon. The Bulma control container is useful for the following reasons.

It helps in maintaining consistent spacing.
The controls can be combined together to make groups or lists.
The control container helps in adding an icon to a form control.

Syntax:

Control class:

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

Control class with elements:

<div class="control">
     <input class="input" type="email" placeholder="Email">
     <div class="select">
        <select>
            <option>....</option>
            <option>....</option>
        </select>
     </div>
      <button class="button">....</button>
      <span class="icon">...</span>
    ...
</div>

Example: The below example shows how to use the Bulma control container.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Form Control</title> 
    <link rel='stylesheet'
          href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> 
    <link rel="stylesheet"
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> 
  
    <style> 
        .head { 
            text-align: center; 
        } 
  
        form { 
            margin: 25px auto; 
            max-width: 400px; 
            text-align: center; 
        } 
  
        form>p{ 
            margin-top: 25px; 
            font-weight: bold; 
              
        } 
  
        form>.control{ 
            margin-top: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="head"> 
        <h1 class="is-size-2 has-text-success"> 
            GeeksforGeeks 
        </h1> 
        <p><b>Bulma Form Control</b></p> 
  
    </div> 
    <div class="container is-fluid"> 
        <form> 
            <p>Form Control with a input and icon:</p> 
  
            <div class="control has-icons-left"> 
                <input class="input" type="text" 
                      placeholder="Enter some text"> 
                <span class="icon is-left"> 
                    <i class="fas fa-user"></i> 
                </span> 
            </div> 
            <p>Form Control with a select element:</p> 
            <div class="control"> 
                <div class="select"> 
                    <select> 
                        <option selected>Select a topic</option> 
                        <option>Data Structures</option> 
                        <option>Algorithms</option> 
                        <option>DBMS</option> 
                    </select> 
                </div> 
            </div> 
            <p>Form Control with a button:</p> 
            <div class="control"> 
                <button class="button is-link"> 
                   Button inside control container 
                 </button> 
            </div> 
        </form> 
    </div> 
</body> 
</html>