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

Question

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.

Answer 1

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...">