4 demos of textarea in Bootstrap forms

The textarea by using Bootstrap framework

By adding the form-control class in the textarea tag, you may create multiline textarea with Bootstrap. The following example shows two text boxes with and without using the Bootstrap class.

See online demo and code

The code:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Bootstrap textarea demo</h1>

<label for=" Email1msg">With Bootstrap:</label>

</div>

<label for=" Email1msg">Without Bootstrap:</label>

</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:

<label for=" Email1msg">With Bootstrap:</label>

</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.

See online demo and code

The code for the textarea is:

<label for="Email1msg" class="col-sm-2 control-label">Message:</label>

</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:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

<!DOCTYPE html>

<html>

<head>

<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>

<h1>Bootstrap Form/Textarea demo</h1>

</div>

<label for="gender1" class="col-sm-2 control-label">Gender:</label>

<option>Female</option>

</select>

</div>

<label for="email1" class="col-sm-2 control-label">Email:</label>

</div>

<label for="password1" class="col-sm-2 control-label">Password:</label>

</div>

<label for="address1" class="col-sm-2 control-label">Address:</label>

</div>

<label for="Email1msg" class="col-sm-2 control-label">Message:</label>

</div>

<label>

<input type="checkbox" class="inputstl"> Remember me

</label>

</div>

<button type="submit" class="btn btn-lg btn-block btn-danger">Create Account</button>

</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.

See online demo and code

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:

<h2>Example of textarea highlighting text</h2>

<textarea class="textarea-bootstrap-highlight ">Enter words e.g Computer, CDs, Notebook and other items</textarea>

$('.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:

See online demo and code

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.

$('#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!

Forms

The textarea by using Bootstrap framework

See online demo and code

A Bootstrap textarea demo with Bootstrap’s and a custom CSS class

See online demo and code

A Bootstrap textarea with text-highlighting using jQuery

See online demo and code

A textarea Bootstrap with line numbers example

See online demo and code

Related Tutorials: