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 ‘textarea’ component of a form is not that attractive in look. Using Bulma we can design textarea elements of the form in a far better way just by adding some simple Bulma classes. Bulma textarea elements are available in different colors, different styles, different sizes, and different states.
Example 1: This Example illustrates simple Bulma Textarea.
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea"
placeholder='Normal Textarea'>
</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: This example illustrates different coloured textarea.
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea is-primary"
placeholder='Primary Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-link"
placeholder='Link Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-info"
placeholder='Info Textarea'>
</textarea>
</div>
</div>
</div>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea is-success"
placeholder='Success Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-warning"
placeholder='Warning Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-danger"
placeholder='Danger Textarea'>
</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 3: This example illustrates different sizes textarea.
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea is-small"
placeholder='small Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea"
placeholder='Normal Textarea'>
</textarea>
</div>
</div>
</div>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea is-medium"
placeholder='Medium Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-large"
placeholder='Large Textarea'>
</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 4: This example illustrates different states of textarea.
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea"
placeholder='Normal Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-focused"
placeholder='Focused Textarea'>
</textarea>
</div>
</div>
</div>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea is-hovered"
placeholder='Hovered Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control is-loading">
<textarea class="textarea"
placeholder='Loading Textarea'>
</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 5: This example shows readonly textarea.
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea"
placeholder=
"I am content of Readonly
Textarea, You can't write me" readonly></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 6: This example shows disabled textarea.
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea col='20'
class="textarea"
placeholder='Disabled Textarea'
disabled>
</textarea>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
