Bootstrap: Textarea height shrinked when I apply Bootstrap style to it

Question

I have a textarea with its height attribute set to 100% in CSS. It looks like this:

When I apply bootstrap style(adding 'form-control' class to it), I looks like this:

After Inspecting the element. I found that bootstrap override its height value to be "auto". The CSS looks like this:

textarea.form-control{
    height: auto;
}

But even if I changed the height in above code to

textarea.form-control {
    height:100%
}

It still looked like this:

Notice the height still shrinked a little, comparing to the original one.

How can I set its height to what it original was(like in the first picture) and still apply Bootstrap style to it?

Answer 1

Just try this, hope this will works for you.

textarea.form-control {
    height:100% !important;
}