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
< html >
< head >
< title >Bulma Textarea</ title >
< link rel = 'stylesheet'
href =
< 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
< html >
< head >
< title >Bulma Textarea</ title >
< link rel = 'stylesheet'
href =
< 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
< html >
< head >
< title >Bulma Textarea</ title >
< link rel = 'stylesheet'
href =
< 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
< html >
< head >
< title >Bulma Textarea</ title >
< link rel = 'stylesheet'
href =
< 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
< html >
< head >
< title >Bulma Textarea</ title >
< link rel = 'stylesheet'
href =
< 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
< html >
< head >
< title >Bulma Textarea</ title >
< link rel = 'stylesheet'
href =
< 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:
Last Updated :
03 Jun, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...