Bulma Horizontal Form

Last Updated : 09 Feb, 2022

Bulma is an 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.

In this article, we will see Bulma’s Horizontal form. The Bulma framework allows its users to create forms horizontally (forms are aligned vertically by default). In this type of form, the labels are aligned next to the input fields i.e, horizontally. Also, note that the form will transform to its vertical alignment once the screen size gets small and therefore the labels get above the input fields.

Bulma Horizontal Form class:

is-horizontal: This class is used to create forms horizontally.
field-label: This class is used for adding the labels next to the input field.
field-body: This class is used for adding the input fields, like select, textarea, etc.

Syntax:

<div class="field is-horizontal">
  <div class="field-label">
    ....
  </div>
  <div class="field-body">
    ....
  </div>
</div>

Example: Below example illustrates Bulma horizontal form.

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>GeeksforGeeks</title> 
    <link
      rel="stylesheet"
      href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
</head> 
<body> 
    <div class="container"> 
        <h1 class="title has-text-centered"> 
          GeeksforGeeks 
        </h1> 
        <h2 class="subtitle has-text-centered"> 
          Sign Up Form  
        </h2> 
      <div class="field is-horizontal"> 
        <div class="field-label is-normal"> 
          <label class="label">Name</label> 
        </div> 
        <div class="field-body"> 
          <div class="field"> 
            <p class="control is-expanded has-icons-left"> 
              <input class="input" type="text"
                     placeholder="Enter your name"> 
              <span class="icon is-small is-left"> 
                <i class="fas fa-user"></i> 
              </span> 
            </p> 
  
          </div> 
        </div> 
      </div> 
        
      <div class="field is-horizontal"> 
        <div class="field-label is-normal"> 
            <label class="label">Email</label> 
          </div> 
        <div class="field-body"> 
          <div class="field is-expanded"> 
                <p class="control is-expanded  
                          has-icons-left has-icons-right"> 
                    <input class="input is-success" 
                           type="email" placeholder="Enter your email"> 
                    <span class="icon is-small is-left"> 
                      <i class="fas fa-envelope"></i> 
                    </span> 
                    <span class="icon is-small is-right"> 
                      <i class="fas fa-check"></i> 
                    </span> 
                </p> 
  
          </div> 
        </div> 
      </div> 
        
      <div class="field is-horizontal"> 
        <div class="field-label is-normal"> 
          <label class="label">Choose Course</label> 
        </div> 
        <div class="field-body"> 
          <div class="field is-narrow"> 
            <div class="control"> 
              <div class="select is-fullwidth"> 
                <select> 
                  <option>Java</option> 
                  <option>C++</option> 
                  <option>Python</option> 
                </select> 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
  
      <div class="field is-horizontal"> 
        <div class="field-label is-normal"> 
          <label class="label">Anything Else?</label> 
        </div> 
        <div class="field-body"> 
            <div class="field"> 
                <div class="control"> 
                  <textarea class="textarea"
                            placeholder="Tell us more..."> 
                  </textarea> 
                </div> 
            </div> 
        </div> 
      </div> 
        
      <div class="field is-horizontal"> 
        <div class="field-label"> 
          <label class="label">Already a Geek?</label> 
        </div> 
        <div class="field-body"> 
          <div class="field is-narrow"> 
            <div class="control"> 
              <label class="radio"> 
                <input type="radio" name="member"> 
                Yes 
              </label> 
              <label class="radio"> 
                <input type="radio" name="member"> 
                No 
              </label> 
            </div> 
          </div> 
        </div> 
      </div> 
        
      <div class="field is-horizontal"> 
        <div class="field-label is-normal"> 
          <label class="label"></label> 
        </div> 
        <div class="field-body"> 
            <div class="field"> 
                <div class="control"> 
                  <label class="checkbox"> 
                    <input type="checkbox"> 
                    I agree to the <a href="#"> 
                    terms and conditions</a> 
                  </label> 
                </div> 
              </div> 
        </div> 
      </div> 
        
      <div class="field is-horizontal"> 
        <div class="field-label"> 
          <!-- Left empty for spacing -->
        </div> 
        <div class="field-body"> 
            <div class="field is-grouped"> 
                <div class="control"> 
                  <button class="button is-success"> 
                    Submit 
                  </button> 
                </div> 
                <div class="control"> 
                  <button class="button is-link is-light"> 
                    Cancel 
                  </button> 
                </div> 
              </div> 
        </div> 
      </div> 
    </div> 
</body> 
</html>