{"id":382,"date":"2015-11-27T18:21:32","date_gmt":"2015-11-27T18:21:32","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=382"},"modified":"2024-01-20T12:29:43","modified_gmt":"2024-01-20T12:29:43","slug":"2-demos-of-textarea-in-bootstrap-forms","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/","title":{"rendered":"4 Demos of Textarea in Bootstrap Forms"},"content":{"rendered":"

The textarea by using Bootstrap framework<\/strong><\/h3>\n

By adding the form-control<\/em><\/strong> 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.<\/p>\n

\"Bootstrap<\/p>\n

The code:<\/strong><\/p>\n

<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\" integrity=\"sha512-dTfge\/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz\/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==\" crossorigin=\"anonymous\">\r\n\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n\r\n\r\n<\/head>\r\n\r\n\r\n\r\n<body>\r\n\r\n<div class=\"container\">\r\n\r\n<h1>Bootstrap textarea demo<\/h1>\r\n\r\n\r\n\r\n<div class=\"form-group\">\r\n\r\n<label for=\" Email1msg\">With Bootstrap:<\/label>\r\n\r\n<textarea class=\"form-control\" rows=\"5\"><\/textarea>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"form-group\">\r\n\r\n<label for=\" Email1msg\">Without Bootstrap:<\/label>\r\n\r\n<textarea rows=\"5\"><\/textarea>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<button type=\"submit\" class=\"btn btn-info\">Submit Information<\/button>\r\n\r\n\r\n\r\n<\/div>\r\n\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
You can see the first textarea is using the following class in the <textarea> tag:<\/p>\n
<div class=\"form-group\">\r\n\r\n<label for=\" Email1msg\">With Bootstrap:<\/label>\r\n\r\n<textarea class=\"form-control\" rows=\"5\"><\/textarea>\r\n\r\n<\/div><\/pre>\n
This class automatically adds 100% available width and you may also notice round borders.<\/p>\n
In the second textarea, the class is not assigned.<\/p>\n
A Bootstrap textarea demo with Bootstrap\u2019s and a custom CSS class<\/strong><\/h3>\n
In the following example, a text area is created along with other form controls including textboxes, a select dropdown and checkbox.<\/p>\n
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\u2019s form-control <\/em>class.<\/p>\n
\"Bootstrap<\/p>\n
The code for the textarea is:<\/p>\n
<div class=\"form-group\">\r\n\r\n<label for=\"Email1msg\" class=\"col-sm-2 control-label\">Message:<\/label>\r\n\r\n<div class=\"col-sm-5\">\r\n\r\n<textarea class=\"form-control inputstl\" rows=\"5\"><\/textarea>\r\n\r\n<\/div>\r\n\r\n<\/div><\/pre>\n
The inputstl<\/em> custom class is assigned after the form-control<\/em> class. To manage the size of text fields, grid classes are used. The complete code of this form is as given below:<\/p>\n
<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\" integrity=\"sha512-dTfge\/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz\/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==\" crossorigin=\"anonymous\">\r\n\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n\r\n\r\n<style>\r\n\r\n.inputstl {\r\n\r\npadding: 9px;\r\n\r\nborder: solid 1px #460023;\r\n\r\noutline: 0;\r\n\r\nbackground: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #FFCEE7), to(#FFFFFF));\r\n\r\nbackground: -moz-linear-gradient(top, #FFFFFF, #FFCEE7 1px, #FFFFFF 25px);\r\n\r\nbox-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;\r\n\r\n-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;\r\n\r\n-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;\r\n\r\n\r\n\r\n}\r\n\r\n\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<\/head>\r\n\r\n\r\n\r\n<body>\r\n\r\n<div class=\"container\">\r\n\r\n<h1>Bootstrap Form\/Textarea demo<\/h1>\r\n\r\n<form class=\"form-horizontal\" role=\"form\">\r\n\r\n<div class=\"form-group\">\r\n\r\n<label for=\"name1\" class=\"col-sm-2 control-label\">Name:<\/label>\r\n\r\n<div class=\"col-sm-4\">\r\n\r\n<input type=\"email\" class=\"form-control inputstl\" id=\"name1\" placeholder=\"Enter Your Full Name\">\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n\r\n<label for=\"gender1\" class=\"col-sm-2 control-label\">Gender:<\/label>\r\n\r\n<div class=\"col-sm-2\">\r\n\r\n<select class=\"form-control inputstl\" id=\"gender1\">\r\n\r\n<option>Male<\/option>\r\n\r\n<option>Female<\/option>\r\n\r\n<\/select>\r\n\r\n\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n\r\n<label for=\"email1\" class=\"col-sm-2 control-label\">Email:<\/label>\r\n\r\n<div class=\"col-sm-5\">\r\n\r\n<input type=\"email\" class=\"form-control inputstl\" id=\"email1\" placeholder=\"Enter Email\">\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n\r\n<label for=\"password1\" class=\"col-sm-2 control-label\">Password:<\/label>\r\n\r\n<div class=\"col-sm-3\">\r\n\r\n<input type=\"password\" class=\"form-control inputstl\" id=\"password1\" placeholder=\"Password here\">\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n\r\n<label for=\"address1\" class=\"col-sm-2 control-label\">Address:<\/label>\r\n\r\n<div class=\"col-sm-5\">\r\n\r\n<input type=\"email\" class=\"form-control inputstl\" id=\"address1\" placeholder=\"Full Address\">\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"form-group\">\r\n\r\n<label for=\"Email1msg\" class=\"col-sm-2 control-label\">Message:<\/label>\r\n\r\n<div class=\"col-sm-5\">\r\n\r\n<textarea class=\"form-control inputstl\" rows=\"5\"><\/textarea>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"form-group\">\r\n\r\n<div class=\"col-sm-offset-2 col-sm-10\">\r\n\r\n<div class=\"checkbox\">\r\n\r\n<label>\r\n\r\n<input type=\"checkbox\" class=\"inputstl\"> Remember me\r\n\r\n<\/label>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n\r\n<div class=\"col-sm-offset-2 col-sm-4\">\r\n\r\n<button type=\"submit\" class=\"btn btn-lg btn-block btn-danger\">Create Account<\/button>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/form>\r\n\r\n<\/div>\r\n\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
A Bootstrap textarea with text-highlighting using jQuery<\/strong><\/h3>\n
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.<\/p>\n
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.<\/p>\n
\"bootstrap<\/p>\n
Setting up the jQuery plugin for textarea:<\/strong><\/p>\n
First of all, you may download the plug-in from the GutGub website here<\/a>. You need to include a few dependency files in the <head> section as follows:<\/p>\n
<link rel=”stylesheet” href=”https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css” crossorigin=”anonymous”><\/p>\n
<link href=”https:\/\/fonts.googleapis.com\/css?family=Open+Sans:400,700|Droid+Sans+Mono” rel=”stylesheet”><\/p>\n
<script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js”><\/script><\/p>\n
<!– highlight-within-textarea CSS\/JS –><\/p>\n
<link href=”css\/highlight-within-textarea\/jquery.highlight-within-textarea.css” rel=”stylesheet”><\/p>\n
<script src=”js\/highlight-within-textarea\/jquery.highlight-within-textarea.js”><\/script><\/p><\/blockquote>\n
After downloading the jquery.highlight-within-textarea.css and jquery.highlight-within-textarea.js, set the paths accordingly.<\/p>\n
The markup:<\/strong><\/p>\n
<section>\r\n\r\n<h2>Example of textarea highlighting text<\/h2>\r\n\r\n\r\n\r\n<textarea class=\"textarea-bootstrap-highlight \">Enter words e.g Computer, CDs, Notebook and other items<\/textarea>\r\n\r\n<script>\r\n\r\n$('.textarea-bootstrap-highlight').highlightWithinTextarea({\r\n\r\n\u00a0\u00a0\u00a0 highlight: [\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'TV',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0'Television',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'Notebook',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'Computer',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'CDs',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'DVDs',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'Smart Phone',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'Galaxy'\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 [0, 5]\r\n\r\n\u00a0\u00a0\u00a0 ]\r\n\r\n});\r\n\r\n<\/script>\r\n\r\n<\/section><\/pre>\n
A little CSS is also required to be used for highlighting that you may customize as per the need of your project:<\/p>\n
.hwt-container {\r\n background-color: #f8f9fa;\r\n}\r\n.hwt-content {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 760px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 height: 100px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 padding: 20px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 border: 1px solid #adb5bd;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 color: inherit;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font: 18px\/25px 'Droid Sans Mono', sans-serif;\r\n\r\n}\r\n.hwt-input:focus {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 outline-color: #495057;\r\n}\r\n.hwt-content mark {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 border-radius: 3px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: #d0bfff;\r\n}\r\n.hwt-content mark.red {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: #ffc9c9;\r\n}\r\n.hwt-content mark.blue {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: #a3daff;\r\n}\r\n.hwt-content mark.yellow {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: #ffec99;\r\n}<\/pre>\n
That is it.<\/p>\n
Just change the words in the array and use it.<\/p>\n
A textarea Bootstrap with line numbers example<\/strong><\/h3>\n
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 \u2013 so letting the user know how many lines are used.<\/p>\n
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:<\/p>\n
\"bootstrap<\/p>\n
To grab this simple and light-weight plug-in, go to this link<\/a>.<\/p>\n
Follow these steps for creating the textarea with line numbers in Bootstrap.<\/p>\n
Step 1:<\/strong><\/p>\n
You need to include the jQuery along with Bootstrap CSS and plug-in JS files as follows:<\/p>\n
<link rel=”stylesheet” href=”https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css” ><\/p>\n
<script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js”><\/script><\/p>\n
<script src=”js\/linenumbers\/jquery-linenumbers.js”><\/script><\/p><\/blockquote>\n
Step 2:<\/strong><\/p>\n
Also add this jQuery code in the <head> section.<\/p>\n
<script>$('document').ready(function(){\r\n\r\n\u00a0 \u00a0 \u00a0 $('#demo-bootstrap-textarea-line').linenumbers({col_width:'75px'});\r\n\r\n})<\/script><\/pre>\n
Step 3:<\/strong><\/p>\n
The CSS:<\/strong><\/p>\n
textarea{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 555px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-size: 14px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 padding: 10px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 line-height: 17px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 border-radius: 3px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 border: 1px solid #aaaaaa;\r\n\r\n}<\/pre>\n
Step 4:<\/strong><\/p>\n
The markup used in the demo:<\/p>\n
<textarea class=\"form-control\" rows=\"15\" id=\"demo-bootstrap-textarea-line\" >Line Number 1.\r\n\r\nNumber 2.\r\n\r\nOn left line is appearing as 3\r\n\r\nKeep going for 4.\r\n\r\nNow line number 5\r\n\r\nLine 6.\r\n\r\n<\/textarea><\/pre>\n
 <\/p>\n
That is it!<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":383,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[30],"yoast_head":"\n4 Demos of Textarea in Bootstrap Forms<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"4 Demos of Textarea in Bootstrap Forms\" \/>\n<meta property=\"og:description\" content=\"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 ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-27T18:21:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-20T12:29:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2015\/11\/7.1-Bootstrap-textarea.png\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"411\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/\",\"url\":\"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/\",\"name\":\"4 Demos of Textarea in Bootstrap Forms\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2015-11-27T18:21:32+00:00\",\"dateModified\":\"2024-01-20T12:29:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"4 Demos of Textarea in Bootstrap Forms\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"4 Demos of Textarea in Bootstrap Forms","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/","og_locale":"en_US","og_type":"article","og_title":"4 Demos of Textarea in Bootstrap Forms","og_description":"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 ... Read more","og_url":"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/","article_published_time":"2015-11-27T18:21:32+00:00","article_modified_time":"2024-01-20T12:29:43+00:00","og_image":[{"width":540,"height":411,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2015\/11\/7.1-Bootstrap-textarea.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/","url":"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/","name":"4 Demos of Textarea in Bootstrap Forms","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2015-11-27T18:21:32+00:00","dateModified":"2024-01-20T12:29:43+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/2-demos-of-textarea-in-bootstrap-forms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"4 Demos of Textarea in Bootstrap Forms"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/382"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=382"}],"version-history":[{"count":3,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/382\/revisions"}],"predecessor-version":[{"id":12311,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/382\/revisions\/12311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/383"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}