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=
</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>
|
Output:
Reference: https://bulma.io/documentation/form/textarea/#sizes
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
24 Apr, 2023
Like Article
Save Article