Skip to content
Related Articles

Related Articles

Bulma | Textarea
  • Last Updated : 16 Jul, 2020

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

Example 2: This example illustrates different coloured textarea.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:



Example 3: This example illustrates different sizes textarea.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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-samll" 
                        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>

chevron_right


Output:

Example 4: This example illustrates different states of textarea.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

Example 5: This example shows readonly textarea.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

Example 6: This example shows disabled textarea.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :