Blog

Bulma – Input

Bulma input

In this guide, we will discuss Input in Bulma.

Description

Bulma provides input field for entering user data along with different types of variations. The input field supports 3 types of modifiers −

  • Color
  • Size
  • State

Colors

The below example describes usage of color modifiers such as is-primary, is-info, is-success, is-warning, is-danger in the input field −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Input Field Variations
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Primary Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-primary" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Info Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-info" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>

            <span class = "is-size-5">
               Success Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-success" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Warning Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-warning" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Danger Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-danger" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

Sizes

The below example describes different types of sizes such as is-small, is-medium and is-large classes of an input field −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Input Field Sizes
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Small Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-small" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Normal Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Medium Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-medium" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Large Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-large" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

States

The input field can be displayed in the different types of states by using classes such as is-hovered, is-focused, is-loading, is-rounded as described in the below example −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Input Field States
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Normal Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Hover Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-hovered" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Focus Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-focused" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Loading Input
            </span>
            <div class = "control is-loading">
               <input class = "input" type = "text" placeholder = "Enter your input">
            </div>
            <br>
            
            <span class = "is-size-5">
               Disabled Input
            </span>
            <div class = "control">
               <input class = "input" type = "text" placeholder = "Enter your input" disabled>
            </div>
            <br>
            
            <span class = "is-size-5">
               Rounded Input
            </span>
            <div class = "control">
               <input class = "input is-rounded" type = "text" placeholder = "Enter your input">
            </div>
            
         </div>
      </section>
      
   </body>
</html>

Next Topic : Click Here

This Post Has 3 Comments

Leave a Reply