Open In App

Bulma Form Addons

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll be seeing Bulma form addons. Bulma Form provides the addons controls which can be used together with the field container. Bulma only provides 3 addons to be added i.e, inputs, buttons, and dropdown with the field container of form. Below are the classes used for attaching form addons.

Bulma Form addons class:

  • has-addons: This class is used for adding attachment controls or addons in a form field.
  • is-static: This class is used for making a button static in nature.
  • is-expanded: This class is used for filling an input field in full width in a form field.
  • is-fullwidth: This class is used for filling a dropdown field in full width in a form field.
  • has-addons-centered: This class is used to align the addons at the center.
  • has-addons-right: This class is used to align the addons at right.

Syntax:

Simple addons

<div class="field has-addons">
    <div class="control">
        <input class="input" type="text" 
            placeholder="Enter your details">
    </div>
    <div class="control">
        <a class="button is-primary">

            Search
        </a>
    </div>
</div>

Full width input field or dropdown

<div class="field has-addons">
    <div class="control">
    ....
    </div>
    <div class="control is-expanded">
        <input class="input " type="text">
    </div>
</div>

Full width dropdown

<div class="field has-addons">
    <div class="control">
    ....
    </div>
    <div class="control is-expanded">
        <div class="select is-fullwidth">
             <select>
               <option>java</option>
               ....
             </select>
         </div>
    </div>
</div>

Example: Below example demonstrates all addons classes.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>GFG</title>
  <link rel="stylesheet"
        href=
</head>
 
<body>
  <div class="container content has-text-centered">
    <h1 class="title has-text-success">GeeksforGeeks</h1>
    <h1 class="subtitle">Bulma form addons</h1>
 
    <!-- Simple addons -->
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Button with Input addon
      </label>
      <div class="control">
        <input class="input" type="text"
               placeholder="Search here">
      </div>
      <div class="control">
        <a class="button is-primary">
          Find
        </a>
      </div>
    </div>
 
    <!-- Combining Dropdown, Button, Input addons-->
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Dropdown, Button, Input addon
      </label>
      <div class="control">
        <span class="select">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </span>
      </div>
      <div class="control">
        <input class="input" type="text"
               placeholder="Enter your choice">
      </div>
      <div class="control">
        <a class="button is-info">
          Add
        </a>
      </div>
    </div>
 
    <!-- addons with static button -->
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Static Button with Input addon
      </label>
      <p class="control">
        <input class="input" type="text"
               placeholder="Enter your college">
      </p>
 
 
      <p class="control">
        <a class="button is-static">
          CS Only
        </a>
      </p>
 
 
    </div>
 
    <!-- Full width Input field with addons -->
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Full width Input addon
      </label>
      <div class="control">
        <span class="select">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </span>
      </div>
      <div class="control is-expanded">
        <input class="input " type="text"
               placeholder="Enter your choice">
      </div>
      <div class="control">
        <a class="button is-info">
          Add
        </a>
      </div>
    </div>
 
    <!-- Full width dropdown addon -->
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Full width dropdown addon
      </label>
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </div>
      </div>
      <div class="control">
        <a class="button is-info">
          Add
        </a>
      </div>
    </div>
 
    <!-- Aligning addons -->
    <div class="field has-addons has-addons-centered">
      <label for="addons" class="subtitle p-2">
        Centered align addons
      </label>
      <div class="control">
        <span class="select">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </span>
      </div>
      <div class="control">
        <input class="input" type="text"
               placeholder="Enter your choice">
      </div>
      <div class="control">
        <a class="button is-info">
          Add
        </a>
      </div>
    </div>
 
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Default align addons
      </label>
      <div class="control">
        <span class="select">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </span>
      </div>
      <div class="control">
        <input class="input" type="text"
               placeholder="Enter your choice">
      </div>
      <div class="control">
        <a class="button is-warning">
          Add
        </a>
      </div>
    </div>
 
    <div class="field has-addons has-addons-right">
      <label for="addons" class="subtitle p-2">
        Right align addons
      </label>
      <div class="control">
        <span class="select">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </span>
      </div>
      <div class="control">
        <input class="input" type="text"
               placeholder="Enter your choice">
      </div>
      <div class="control">
        <a class="button is-danger">
          Add
        </a>
      </div>
    </div>
  </div>
</body>
 
</html>


Output:

Bulma Form addons

Bulma Form addons

Reference: https://bulma.io/documentation/form/general/#form-addons



Last Updated : 01 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads