Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by Karthikeyan Vedi

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
    <div class="form-group">
    <div class="col-sm-10"> 
     <textarea class="form-control" name="answer_sample" id="answer_sample" rows="5">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
     </textarea>
      <br/>
    </div>
  </div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

/**
* @name             Elastic+
* @descripton       grow and shrink your textareas automatically
*
* @author           Casey W. Stark
* @author-email     [email protected]
* @author-website   http://thestarkeffect.com
*
* @license           MIT License - http://www.opensource.org/licenses/mit-license.php
*
* the original by:
* @author           Jan Jarfalk
* @author-email     [email protected]
* @author-website   http://www.unwrongest.com
*/

(function($){ 
  $.fn.elastic = function(options) {
    // We will create a div clone of the textarea
    // by copying these attributes from the textarea to the div.
    var mimics = [
      'paddingTop',
      'paddingRight',
      'paddingBottom',
      'paddingLeft',
      'fontSize',
      'lineHeight',
      'fontFamily',
      'width',
      'fontWeight',
      'textIndent'];
    
    // support multiple elements
    if (this.length > 1) {
      this.each(function() {
        // textareas only
        if (this.type != 'textarea') return false;
        $this.elastic()
      });
      return this;
    }
    
    // cache the textarea jquery object
    var textarea = this;
    var twin = $('<div></div>').css({
      'position': 'absolute',
      'display': 'none',
      'word-wrap': 'break-word'
    });
    var lineHeight = parseInt(textarea.css('line-height'), 10) || parseInt(textarea.css('font-size'), 10);
    var minHeight = parseInt(textarea.css('height'), 10) || lineHeight * 2;
    var maxHeight = parseInt(textarea.css('max-height'), 10) || Number.MAX_VALUE;
    var goalHeight = 0;
    var i = 0;
    
    // Opera returns max-height of -1 if not set
    if (maxHeight < 0) { maxHeight = Number.MAX_VALUE; }
    
    // Append the twin to the DOM
    // We are going to meassure the height of this, not the textarea.
    twin.appendTo(this.parent());
    
    // Copy the essential styles (mimics) from the textarea to the twin
    var i = mimics.length;
    while (i--) {
     ...