Open In App

Bulma | Textarea

Improve
Improve
Like Article
Like
Save
Share
Report

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: 
 

 



Last Updated : 03 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads