How to set a Textarea to 100% height in Bootstrap 3?

I believe this is a bootstrap issue. I ran into a similar problem where the textarea was not allowing for more than 1 row. I found (through trial and error) that placing the textarea in a div and then ignoring the form-group-(x) call within the first div, I was able to control the rows and the cols within the textarea.

<div class="form-group">
    <label class="col-sm-3 control-label">Description</label>
    <div class="col-sm-9">
        <textarea class="form-control" rows="10"></textarea>
    </div>
</div>

Changing your code to use the form-group functionality will correct the issue:

<div class="form-group">
    <textarea class="form-control" rows="8"></textarea>
</div>

That should do the trick for you.


html, body, .container {
  height: 100%;
}
textarea.form-control {
  height: 100%;
}

See demo on Fiddle


Doesn't work for me for bootstrap 3- davidkonrad You can try to modify the number of rows

<textarea class="form-control" cols="60" rows="16"></textarea>

or give a height fixed for the parent container

.form-group{
   height:250px;
 }
textarea{
   height:100%;
}

textarea { 
   min-height: 100%;
}