Bulma Input Styles

Last Updated : 24 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 style is used to set the style on input fields. There is only a single style that is used in an input field. This style is used to create a rounded corner input field.

Bulma Input Style Class:

is-rounded: It is used to set the rounded corner style in an input field.

Syntax:

<input class="input is-rounded">

Example: This example describes the uses of Bulma Input Styles Class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Input Styles</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 Styles</p> 
  
  
    <div class="container"> 
        <input class="input" 
               type="text" 
               placeholder="Normal input field"> 
        <br><br> 
  
        <input class="input is-rounded"
               type="text" 
               placeholder="Rounded corner input field"> 
    </div> 
</body> 
  
</html>