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
.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
.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, ButtonsModule } from 'ng-uikit-pro-standard'// MDB Angular Free
import { InputsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'