Bulma | Textarea
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= <!-- 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
<html> <head> <title>Bulma Textarea</title> <link rel='stylesheet' href= <!-- 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
<html> <head> <title>Bulma Textarea</title> <link rel='stylesheet' href= <!-- 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
<html> <head> <title>Bulma Textarea</title> <link rel='stylesheet' href= <!-- 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
<html> <head> <title>Bulma Textarea</title> <link rel='stylesheet' href= <!-- 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
<html> <head> <title>Bulma Textarea</title> <link rel='stylesheet' href= <!-- 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:
Please Login to comment...