Bulma Input Colors

Bulma is an open-source CSS framework that can be used to make your web development faster as it comes with pre-built components and elements. In this article, we will be seeing how to change Bulma Input Colors using the color helper classes.

Input Color Classes:

is-primary: This class is used to set the input color to the primary color.
is-link: This class is used to set the input color to the link color.
is-info: This class is used to set the input color to the info color.
is-success: This class is used to set the input color to the success color.
is-warning: This class is used to set the input color to the warning color.
is-danger: This class is used to set the input color to the danger color.

Syntax:

<input class="input is-link" type="text" 
    placeholder="Input with Link Color">

Example: The below example shows how to use the given classes to change the color of the input.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bulma Input Colors</title>
    <link rel='stylesheet' 
          href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

    <style>
        input[type="text"]{
            margin-top: 25px;
            width: 50%;
        }
    </style>
</head>

<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
    <b>Bulma Input Colors</b>
    <div class="container">
        <input class="input is-primary" 
               type="text" 
               placeholder="Input with Primary Color">
        <input class="input is-link" 
               type="text" 
               placeholder="Input with Link Color">
        <input class="input is-info" 
               type="text" 
               placeholder="Input with Info Color">
        <input class="input is-success" 
               type="text" 
               placeholder="Input with Success Color">
        <input class="input is-warning" 
               type="text" 
               placeholder="Input with Warning Color">
        <input class="input is-danger" 
               type="text" 
               placeholder="Input with Danger Color">
    </div>
</body>

</html>

Output:

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

Explore