Bulma Textarea Sizes

Last Updated : 24 Apr, 2023

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.

The Bulma textarea form element is the multi-line version of the input element. We will use <textarea> element with textarea class to create textarea element in Bulma.

The Bulma Textarea Size is used to set the size of the textarea field. There are four different input sizes available in Bulma that are – small, normal, medium, 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 Textarea Sizes Classes:

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

Syntax:

<textarea class="textarea is-small"
    placeholder="Small textarea">
</textarea>

Example: This example describes the Bulma Textarea Size Classes.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Textarea 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 Textarea Sizes</p>
 
 
    <div class="container">
        <textarea class="textarea is-small"
                  placeholder="Small size textarea field">
        </textarea>
        <br>
 
        <textarea class="textarea"
                  placeholder="Normal size textarea field">
        </textarea>
        <br>
 
        <textarea class="textarea is-medium"
                  placeholder="Medium size textarea field">
        </textarea>
        <br>
 
        <textarea class="textarea is-large"
                  placeholder="Large size textarea field">
        </textarea>
    </div>
</body>
 
</html>