Open In App

Bulma Input Styles

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:

Syntax:



<input class="input is-rounded">

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




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Input Styles</title>
    <link rel='stylesheet'
          href=
</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>

Output:

Bulma Input Styles

Reference: https://bulma.io/documentation/form/input/#styles


Article Tags :