The textarea by using Bootstrap framework
By adding the form-control class in the textarea tag, you may create a multiline textarea with Bootstrap. The following example shows two text boxes with and without using the Bootstrap class.
The code:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <h1>Bootstrap textarea demo</h1> <div class="form-group"> <label for=" Email1msg">With Bootstrap:</label> <textarea class="form-control" rows="5"></textarea> </div> <div class="form-group"> <label for=" Email1msg">Without Bootstrap:</label> <textarea rows="5"></textarea> </div> <button type="submit" class="btn btn-info">Submit Information</button> </div> </body> </html>
You can see the first textarea is using the following class in the <textarea> tag:
<div class="form-group"> <label for=" Email1msg">With Bootstrap:</label> <textarea class="form-control" rows="5"></textarea> </div>
This class automatically adds 100% available width and you may also notice round borders.
In the second textarea, the class is not assigned.
The Video of this Tutorial
A Bootstrap textarea demo with Bootstrap’s and a custom CSS class
In the following example, a text area is created along with other form controls including textboxes, a select dropdown and checkbox.
All the controls are given a custom CSS class which is created inside the head section of the webpage, to change the look of the form. Along with custom class, each control is also given the Bootstrap’s form-control class.
The code for the textarea is:
<div class="form-group"> <label for="Email1msg" class="col-sm-2 control-label">Message:</label> <div class="col-sm-5"> <textarea class="form-control inputstl" rows="5"></textarea> </div> </div>
The inputstl custom class is assigned after the form-control class. To manage the size of text fields, grid classes are used. The complete code of this form is as given below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.inputstl {
padding: 9px;
border: solid 1px #460023;
outline: 0;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #FFCEE7), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #FFCEE7 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap Form/Textarea demo</h1>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name1" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-4">
<input type="email" class="form-control inputstl" id="name1" placeholder="Enter Your Full Name">
</div>
</div>
<div class="form-group">
<label for="gender1" class="col-sm-2 control-label">Gender:</label>
<div class="col-sm-2">
<select class="form-control inputstl" id="gender1">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="form-group">
<label for="email1" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-5">
<input type="email" class="form-control inputstl" id="email1" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label for="password1" class="col-sm-2 control-label">Password:</label>
<div class="col-sm-3">
<input type="password" class="form-control inputstl" id="password1" placeholder="Password here">
</div>
</div>
<div class="form-group">
<label for="address1" class="col-sm-2 control-label">Address:</label>
<div class="col-sm-5">
<input type="email" class="form-control inputstl" id="address1" placeholder="Full Address">
</div>
</div>
<div class="form-group">
<label for="Email1msg" class="col-sm-2 control-label">Message:</label>
<div class="col-sm-5">
<textarea class="form-control inputstl" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" class="inputstl"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button type="submit" class="btn btn-lg btn-block btn-danger">Create Account</button>
</div>
</div>
</form>
</div>
</body>
</html>
A Bootstrap textarea with text-highlighting using jQuery
In this example, a textarea in Bootstrap is created by using a jQuery plug-in. This enables highlighting certain words as a user types in the textarea.
For example, you have a form for taking the feedback about the electronic items. As a user enters electronic item like TV, Television, computer, notebook, laptop etc. these can be highlighted in the text area on the fly. First, have a look at this example and then I will explain how you may configure it on your website.
Setting up the jQuery plugin for textarea:
First of all, you may download the plug-in from the GutGub website here. You need to include a few dependency files in the <head> section as follows:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” crossorigin=”anonymous”>
<link href=”https://fonts.googleapis.com/css?family=Open+Sans:400,700|Droid+Sans+Mono” rel=”stylesheet”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<!– highlight-within-textarea CSS/JS –>
<link href=”css/highlight-within-textarea/jquery.highlight-within-textarea.css” rel=”stylesheet”>
<script src=”js/highlight-within-textarea/jquery.highlight-within-textarea.js”></script>
After downloading the jquery.highlight-within-textarea.css and jquery.highlight-within-textarea.js, set the paths accordingly.
The markup:
<section>
<h2>Example of textarea highlighting text</h2>
<textarea class="textarea-bootstrap-highlight ">Enter words e.g Computer, CDs, Notebook and other items</textarea>
<script>
$('.textarea-bootstrap-highlight').highlightWithinTextarea({
highlight: [
'TV',
'Television',
'Notebook',
'Computer',
'CDs',
'DVDs',
'Smart Phone',
'Galaxy'
[0, 5]
]
});
</script>
</section>
A little CSS is also required to be used for highlighting that you may customize as per the need of your project:
.hwt-container {
background-color: #f8f9fa;
}
.hwt-content {
width: 760px;
height: 100px;
padding: 20px;
border: 1px solid #adb5bd;
color: inherit;
font: 18px/25px 'Droid Sans Mono', sans-serif;
}
.hwt-input:focus {
outline-color: #495057;
}
.hwt-content mark {
border-radius: 3px;
background-color: #d0bfff;
}
.hwt-content mark.red {
background-color: #ffc9c9;
}
.hwt-content mark.blue {
background-color: #a3daff;
}
.hwt-content mark.yellow {
background-color: #ffec99;
}
That is it.
Just change the words in the array and use it.
A textarea Bootstrap with line numbers example
In the following example, another jQuery plug-in is used with the Bootstrap class for textarea. This plug-in adds line-numbers as text is added in the textarea. As you press enter in the textarea a new line number will be added – so letting the user know how many lines are used.
First, have a look at this demo and then I will share the plug-in link along with how you may use it for your website:
To grab this simple and light-weight plug-in, go to this link.
Follow these steps for creating the textarea with line numbers in Bootstrap.
Step 1:
You need to include the jQuery along with Bootstrap CSS and plug-in JS files as follows:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” >
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script src=”js/linenumbers/jquery-linenumbers.js”></script>
Step 2:
Also add this jQuery code in the <head> section.
<script>$('document').ready(function(){
$('#demo-bootstrap-textarea-line').linenumbers({col_width:'75px'});
})</script>
Step 3:
The CSS:
textarea{
width: 555px;
font-size: 14px;
padding: 10px;
line-height: 17px;
border-radius: 3px;
border: 1px solid #aaaaaa;
}
Step 4:
The markup used in the demo:
<textarea class="form-control" rows="15" id="demo-bootstrap-textarea-line" >Line Number 1. Number 2. On left line is appearing as 3 Keep going for 4. Now line number 5 Line 6. </textarea>
That is it!