Text Area
Text area for entering large amounts of text. Documentation and description of possible sizes and states.
Basic Example #
Unlike a simple text field, a text area can contain multi-line text.
Example
<textarea placeholder="Text Area" class="form-control" rows="4"></textarea>
Sizing #
Set heights using classes like
.form-control-lg
and
.form-control-sm
.
Example
<textarea placeholder="Large" class="form-control form-control-lg" rows="2"></textarea
><textarea placeholder="Normal" class="form-control mt-3" rows="2"></textarea
><textarea
placeholder="Small"
class="form-control mt-3 form-control-sm"
rows="2"
></textarea>
States #
A text area can be in several different states. Below you can see a demo of these states:
Example
<textarea placeholder="Normal" class="form-control" rows="2"></textarea
><textarea
placeholder="Readonly"
readonly=""
class="form-control mt-3"
rows="2"
></textarea
><textarea
placeholder="Disabled"
disabled=""
class="form-control mt-3"
rows="2"
></textarea
><textarea placeholder="Valid" class="form-control is-valid mt-3" rows="2"></textarea
><textarea placeholder="Invalid" class="form-control is-invalid mt-3" rows="2"></textarea>