Geek Answers Handbook

Twitter bootstrap - increasing the height of the form field to fit the button

I am trying to increase the size and font size of my search bar using twitter bootstrap .. so that it also works in flexible 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, im using a btn-large class on a button, but don’t know if there is an equivalent way to make the search field large.

Any help would be greatly appreciated.

+4
source share
1 answer

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

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

or in 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>

perfect fit: -)

enter image description here

Update

I mixed up a lot with responsive design like @media all { } etc. but nothing works. Hovever, just remove span6 from the class declaration (I don’t understand why this should be optional in the <input> element), 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...">
+4
source

More articles:


All Articles