BootStrap resize navBar height

Question

In this sample of bootstrap navbar-default , I can not resize height of that.This height is big . How to resize that with bootstrap class's ?

for example:

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Answer 1

The default css for the class form-control that bootstrap has is there is height and a padding so I suggest overwrite that with your preferred height. Give textbox and button a class you want like.

.someclass { 
   height: auto !important;
   padding: 5px; //manipulate this
}

or

.someclass { 
   height: 20px !important; //manipulate this
}

See example here

Hope it helps.

Answer 2

Are you placing the same in or tag . These directly pick up the attributes along with the usage of variopus classes . For example try this one -

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<form  class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> </header>