twitter bootstrap - increasing the height of a form field to match button
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...">
Comments
-
sambehera almost 2 years
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.