Bulma Input Sizes

Last Updated : 20 Jan, 2022

Bulma is a free, open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

Bulma Input Size is used to set the size of input fields. There are four different input sizes available in Bulma that are small, medium, normal, and large. You can set the input size using one of the classes provided by Bulma. The default size of an input field is normal.

Bulma Input size classes:

is-small: It is used to set the input field size to small.
is-normal: It is used to set the input field size to normal.
is-medium: It is used to set the input field size to medium.
is-large: It is used to set the input field size to large.

Example: This example demonstrates the Bulma input size classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Input Sizes</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-1 has-text-success"> 
        GeeksforGeeks 
    </h1> 
    <p class="is-size-3">Bulma Input Sizes</p> 
  
  
    <div class="container"> 
        <input class="input is-small" type="text" 
            placeholder="Small size input field"> 
        <br><br> 
  
        <input class="input is-normal" type="number"
            placeholder="Normal size input field"> 
        <br><br> 
  
        <input class="input is-medium" type="number"
            placeholder="Medium size input field"> 
        <br><br> 
  
        <input class="input is-large" type="password" 
            placeholder="Large size input field"> 
    </div> 
</body> 
  
</html>