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.

Bootstrap textarea

See online demo and code

The code:

 

You can see the first textarea is using the following class in the <textarea> tag:

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.

Bootstrap textarea form

See online demo and code

The code for the textarea is:

 

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:

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.

bootstrap highlight textarea

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:

A little CSS is also required to be used for highlighting that you may customize as per the need of your project:

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:

bootstrap LinenNumbers textarea

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.

Step 3:

The CSS:

Step 4:

The markup used in the demo:

 

That is it!