title: How to decrease the height of the input text field in bootstrap?
body: <p>How to decrease the height of the input text field in bootstrap? My code:</p>
  
  <p><strong>Head section:</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
      &lt;title&gt;Insert title here&lt;/title&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
      &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/defaultStyles.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/myMenuStyle.css"&gt;
      &lt;link rel="stylesheet" type="text/css"
      href="css/FiexedHeaderTableScrollingStyle.css"&gt;
      &lt;style type="text/css"&gt;
          .form-group {
              margin-bottom: 0px ;
              margin-top: 0px; &lt;!-- I used this style to decrease space between fields --&gt;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p><strong>Actual form code:</strong></p>
  
  <pre><code>&lt;form class="form-horizontal" action="addKPITODB"&gt;
      &lt;div class="form-group form-group-sm"&gt;
          &lt;label for="kpi_name" class="col-sm-2 control-label"&gt;KPI Name&lt;/label&gt;
          &lt;div class="col-sm-5"&gt;
              &lt;input type="text" class="form-control" id="kpi_name"
              placeholder="KPI Name" name="kpi_name"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group  form-group-sm"&gt;
          &lt;label for="kpi_sql" class="col-sm-2 control-label"&gt;KPI SQL&lt;/label&gt;
          &lt;div class="col-sm-10"&gt;
              &lt;input type="text" class="form-control" placeholder="K sql"
              name="kpi_sql" id="kpi_sql"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The above code gives the following output:</p>
  
  <p><a href="https://i.stack.imgur.com/dKUqo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dKUqo.png" alt="enter image description here"></a></p>
  
  <p>In the above image, the input field height is big even I am using <code>form-group form-group-sm</code>. I need to decrease the height further.</p>