title: Bootstrap: Textarea height shrinked when I apply Bootstrap style to it
body: <p>I have a textarea with its height attribute set to 100% in CSS. It looks like this:
  <img src="https://i.stack.imgur.com/lrTGV.png" alt="original height"></p>
  
  <p>When I apply bootstrap style(adding 'form-control' class to it), I looks like this:
  <img src="https://i.stack.imgur.com/PeAC3.png" alt="After I apply &#39;form-control&#39; class "></p>
  
  <p>After Inspecting the element. I found that bootstrap override its height value to be "auto". The CSS looks like this:</p>
  
  <pre><code>textarea.form-control{
      height: auto;
  }
  </code></pre>
  
  <p>But even if I changed the height in above code to </p>
  
  <pre><code>textarea.form-control {
      height:100%
  }
  </code></pre>
  
  <p>It still looked like this:
  <img src="https://i.stack.imgur.com/JnfRL.png" alt="enter image description here"></p>
  
  <p>Notice the height still shrinked a little, comparing to the original one.</p>
  
  <p>How can I set its height to what it original was(like in the first picture) and still apply Bootstrap style to it?</p>