twitter bootstrap - increasing the height of a form field to match button

css, forms, html, twitter-bootstrap, twitter-bootstrap-2

Solution

No, there is only classes for size and alignment for text input. And you cant just add btn-large since it is ignored. However, you can add inline css to the input with the exact same features as btn-large

style="padding: 11px 19px;font-size: 17.5px;"

or in a CSS class

input.edit-btn-large {
   padding: 11px 19px;
   font-size: 17.5px;
}

<form class="form-search">
  <div class="input-append">
     <input type="text" class="span6 search-query btn-large" placeholder="Type here..." style="padding: 11px 19px;font-size: 17.5px;">
       <button type="submit" class="btn btn-large">
          <i class="icon-search"></i>
          Search
      </button>
   </div>
</form>

aligns perfectly :-)

Update

I've messed a lot around with responsive design, eg `@media all { }` and so on, but nothing seems to really work. Hovever, just remove `span6` from the class-declaration (I cannot see why this should be nessecary on the `<input>`-element anyway) and it works in all resolutions!

eg

input.edit-btn-large {
   font-size: 17.5px;
   padding: 11px 19px;
}

and

<input type="text" class="search-query edit-btn-large" placeholder="Type here...">

Problem

I'm trying to make the height and font size of my search bar larger with twitter bootstrap.. such that it also works in responsive mode. ``` <div class="hero-unit center"> <h2>Search</h2> <form class="form-search"> <div class="input-append"> <input type="text" class="span6 search-query" placeholder="Type here..."> <button type="submit" class="btn btn-large"> <i class="icon-search"></i> Search </button> </div> </form> </div> ``` the thing is that im using btn-large class on the button but dont know if there is an equivalent way to make the search field also larger.. any help would be much appreciated.

Original source