Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Bootstrap Form TextArea
Bootstrap provides excellent styling for textarea elements in forms. The <textarea> element is used when you need multiple lines of input from users, such as comments, descriptions, or detailed information.
Basic Textarea Syntax
To create a Bootstrap-styled textarea, use the form-control class:
<div class="form-group">
<label for="textarea">Label Text</label>
<textarea class="form-control" rows="3" placeholder="Enter text here"></textarea>
</div>
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-4">
<form role="form">
<div class="form-group">
<label for="player">Player</label>
<input type="text" class="form-control" id="player" placeholder="Player Name">
</div>
<div class="form-group">
<label for="rank">Rank</label>
<input type="text" class="form-control" id="rank" placeholder="Player Rank">
</div>
<div class="form-group">
<label for="details">Player Details</label>
<textarea class="form-control" id="details" rows="3" placeholder="Player Details"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Textarea Properties
| Attribute | Description | Example |
|---|---|---|
rows |
Sets the visible height | rows="5" |
cols |
Sets the visible width | cols="50" |
placeholder |
Shows hint text | placeholder="Enter text" |
readonly |
Makes it read-only | readonly |
Different Textarea Sizes
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="form-group">
<label>Small Textarea (2 rows)</label>
<textarea class="form-control" rows="2" placeholder="Small textarea"></textarea>
</div>
<div class="form-group">
<label>Medium Textarea (4 rows)</label>
<textarea class="form-control" rows="4" placeholder="Medium textarea"></textarea>
</div>
<div class="form-group">
<label>Large Textarea (6 rows)</label>
<textarea class="form-control" rows="6" placeholder="Large textarea"></textarea>
</div>
</div>
</body>
</html>
Key Features
- Responsive: Automatically adjusts to container width
- Consistent styling: Matches other Bootstrap form controls
-
Customizable height: Use the
rowsattribute - Accessible: Works with screen readers when properly labeled
Conclusion
Bootstrap textareas provide a clean, responsive way to collect multi-line input. Use the form-control class and adjust the rows attribute to control the height based on your needs.
Updated on: 2026-03-15T23:18:59+05:30
3K+ Views
Advertisements