Angular Bootstrap Textarea

Angular Bootstrap textarea is an input dedicated for a large volume of text. It may be used in a variety of components like forms, comment sections and forums.

Textareas don't have to be boring. They can be enhanced with colors, shadows or rounded corners.

Examples of Bootstrap textarea use:

  • Comment section
  • Form
  • Forums

See the following Bootstrap textarea examples:


Material textarea

    <!--Basic textarea-->
<div class="md-form">
    <textarea type="text" id="form7" class="md-textarea form-control" mdbInputDirective></textarea>
    <label for="form7">Basic textarea</label>
</div>

<!--Textarea with icon prefix-->
<div class="md-form">
    <i class="fa fa-pencil prefix"></i>
    <textarea type="text" id="form8" class="md-textarea form-control" mdbInputDirective></textarea>
    <label for="form8">Icon Prefix</label>
</div>

Auto resizing textarea

            <div class="md-form">
  <textarea type="text" id="form7" class="md-textarea md-textarea-auto form-control" mdbInputDirective></textarea>
  <label for="form7">Auto resizing textarea</label>
</div>

Material textarea with colorful border


<!--Material textarea-->
<div class="md-form mb-4 pink-textarea active-pink-textarea">
  <textarea type="text" id="form18" class="md-textarea form-control" mdbInputDirective></textarea>
  <label for="form18">Material textarea colorful on :focus state</label>
</div>

<!--Material textarea-->
<div class="md-form amber-textarea active-amber-textarea">
  <textarea type="text" id="form19" class="md-textarea form-control" mdbInputDirective></textarea>
  <label for="form19">Material textarea colorful on :focus state</label>
</div>
<!--Basic textarea-->
<div class="md-form mb-4 pink-textarea active-pink-textarea-2">
  <textarea type="text" id="form17" class="md-textarea form-control" mdbInputDirective></textarea>
  <label for="form17">Material textarea always colorful</label>
</div>

<!--Basic textarea-->
<div class="md-form amber-textarea active-amber-textarea-2">
  <textarea type="text" id="form16" class="md-textarea form-control" mdbInputDirective></textarea>
  <label for="form16">Material textarea always colorful</label>
</div>

    

.pink-textarea textarea.md-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #f48fb1;
    box-shadow: 0 1px 0 0 #f48fb1;
}
.active-pink-textarea.md-form label.active {
    color: #f48fb1;
}

.amber-textarea textarea.md-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #ffa000;
    box-shadow: 0 1px 0 0 #ffa000;
}
.active-amber-textarea.md-form label.active {
    color: #ffa000;
}


.active-pink-textarea-2 textarea.md-textarea {
    border-bottom: 1px solid #f48fb1;
    box-shadow: 0 1px 0 0 #f48fb1;
}
.active-pink-textarea-2.md-form label.active {
    color: #f48fb1;
}
.active-pink-textarea-2.md-form label {
    color: #f48fb1;
}


.active-amber-textarea-2 textarea.md-textarea {
    border-bottom: 1px solid #ffa000;
    box-shadow: 0 1px 0 0 #ffa000;
}
.active-amber-textarea-2.md-form label.active {
    color: #ffa000;
}
.active-amber-textarea-2.md-form label {
    color: #ffa000;
}
        

Textarea within forms MDB Pro component

Info notification

MDB has many forms to use together with textarea. Take a look here to know all the possibilities.

Contact Us

Contact Us


<!-- Section: form gradient -->
<section class="form-gradient mb-5">

  <!--Form with header-->
  <div class="card">

    <!--Header-->
    <div class="header peach-gradient">

      <div class="row d-flex justify-content-center">
        <h3 class="white-text mb-0 py-5 font-weight-bold">Contact Us</h3>
      </div>

    </div>
    <!--Header-->

    <div class="card-body mx-4">

      <div class="md-form">
        <i class="fa fa-user prefix grey-text"></i>
        <input type="text" id="form104" class="form-control" mdbInputDirective>
        <label for="form104">Your name</label>
      </div>

      <div class="md-form">
        <i class="fa fa-envelope prefix grey-text"></i>
        <input type="text" id="form105" class="form-control" mdbInputDirective>
        <label for="form105">Your email</label>
      </div>

      <div class="md-form">
        <i class="fa fa-tag prefix grey-text"></i>
        <input type="text" id="form106" class="form-control" mdbInputDirective>
        <label for="form106">Subject</label>
      </div>

      <div class="md-form">
        <i class="fa fa-pencil prefix grey-text"></i>
        <textarea type="text" id="form107" class="md-textarea form-control" rows="5" mdbInputDirective></textarea>
        <label for="form107">Your message</label>
      </div>


      <!--Grid row-->
      <div class="row d-flex align-items-center mb-3 mt-4">

        <!--Grid column-->
        <div class="col-md-12">
          <div class="text-center">
            <button type="button" class="btn btn-grey btn-rounded z-depth-1a">Send</button>
          </div>
        </div>
        <!--Grid column-->

      </div>
      <!--Grid row-->
    </div>

  </div>
  <!--/Form with header-->

</section>
<!-- Section: form gradient -->
<!-- Section: form dark -->
<section class="form-dark mb-5">

  <!--Form without header-->
  <div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).jpg');">
    <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">

      <!--Header-->
      <div class="text-center">
        <h3 class="white-text mb-5 mt-4 font-weight-bold text-uppercase">
          <strong>Contact</strong>
          <a class="green-text font-weight-bold">
            <strong> Us</strong>
          </a>
        </h3>
      </div>

      <div class="md-form">
        <input type="text" id="form100" class="form-control" mdbInputDirective>
        <label for="form100">Your name</label>
      </div>

      <div class="md-form">
        <input type="text" id="form101" class="form-control" mdbInputDirective>
        <label for="form101">Your email</label>
      </div>

      <div class="md-form">
        <input type="text" id="form102" class="form-control" mdbInputDirective>
        <label for="form102">Subject</label>
      </div>

      <div class="md-form">
        <textarea type="text" id="form103" class="md-textarea form-control" rows="5" mdbInputDirective></textarea>
        <label for="form103">Your message</label>
      </div>

      <!--Grid row-->
      <div class="row d-flex align-items-center">

        <!--Grid column-->
        <div class="text-center col-md-12 mt-3 mb-2">
          <button type="button" class="btn btn-success btn-block btn-rounded z-depth-1">Send</button>
        </div>
        <!--Grid column-->
      </div>
      <!--Grid row-->

    </div>
  </div>
  <!--/Form without header-->

</section>
<!-- Section: form dark -->
    

.form-gradient .header {
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem; }

.form-gradient input[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid #fd9267;
  box-shadow: 0 1px 0 0 #fd9267; }

.form-gradient input[type=text]:focus:not([readonly]) + label {
  color: #4f4f4f; }

.form-gradient textarea.md-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #fd9267;
    box-shadow: 0 1px 0 0 #fd9267; }


.form-dark .md-form label {
  color: #fff; }

.form-dark input[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid #00C851;
  -webkit-box-shadow: 0 1px 0 0 #00C851;
  box-shadow: 0 1px 0 0 #00C851; }

.form-dark input[type=text]:focus:not([readonly]) + label {
  color: #fff; }

.form-dark textarea.md-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #00C851;
    box-shadow: 0 1px 0 0 #00C851;
    color: #fff; }

.form-dark textarea.md-textarea  {
    color: #fff;
}

.form-dark .form-control, .form-dark .form-control:focus {
    color: #fff;
}
        

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Textarea:
// MDB Angular Pro
import { InputsModule, WavesModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { InputsModule, WavesModule } from 'angular-bootstrap-md'