title: How do I customize twitter bootstrap's various input sizes without using !important?
body: <p>Bootstrap's input sizes only expand by width, whereas the buttons expand by both height and font size. (see pic) I'm trying to customize the inputs to expand by height and font size as well. (Note: they're fixing this for the next version, but I'm too impatient to wait)</p>
  
  <p><img src="https://i.stack.imgur.com/soPt3.jpg" alt="enter image description here"></p>
  
  <p>So far I can only achieve this by using the <code>!important</code> hack to override the input css. I want to avoid using <code>!important</code> at all costs, because it is awful practice.</p>
  
  <p>Currently, this is the code I have for expanding the height of <code>.input-large</code>. It does not work when I remove <code>!important</code>. I assume this is because inputs are given higher priority than classes (which I find absolutely silly, but correct me if I'm wrong).</p>
  
  <pre><code>.input-large {
  width: 210px;
  height: 44px !important;
  margin-bottom: 10px !important;
  line-height: 30px !important;
  padding: 11px 19px !important;
  font-size: 17.5px !important;
  }
  </code></pre>
  
  <p>Is there any way I can achieve this <strong>without removing the default input styling</strong> and <strong>not declaring <code>!important</code></strong>?</p>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/xryQK/" rel="noreferrer">http://jsfiddle.net/xryQK/</a></p>