title: Bootstrap 3, how to reduce the padding of text in input element?
body: <p>I apply the Bootstrap 3 style to my edit form. However, I want to reduce the padding of the input box and font-size.</p>
  
  <p>Because of this, it make my edit form larger.
  I tried to change the grid column class (col-sm-<em>,col-md-</em>), but it didn't help.</p>
  
  <p>And also override the <strong>css</strong>, it make the input box doesn't show the text.</p>
  
  <pre class="lang-css prettyprint-override"><code>.form-horizontal .form-group input, 
  .form-horizontal .form-group select,
  .form-horizontal .form-group label { 
      height: 14px;
      line-height: 14px;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="form-group"&gt;
      &lt;label for="txtProductName" class="col-sm-2 control-label"&gt;Name :&lt;/label&gt;
      &lt;div class="col-md-3"&gt;
          &lt;input type="text" id="txtProductName" CssClass="form-control"/&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/gTqk6.png" alt="enter image description here"></p>