google search bar twitter-bootstrap

domain199

New Member
I'm looking to create a plain index page with a Google-style centred search bar, however I'm struggling to get things looking good with Twitter Bootstrap.The search bar must have a search icon button appended at the end (right side) of the search field. I have used typeahead as I am planning to code a dropdown search-suggestion system.\[code\]<div class="hero-unit"><div class="input-append"> <input type="text" data-provider="typeahead" class="input-large" placeholder="What do you want to know?" autocomplete="off"> <button type="submit" class="btn-large btn-success"> <i class="icon-search"></i> </button></div>\[/code\]It must also be larger (taller) than the standard textbox, a feature not yet available in the stable release of Twitter Bootstrap, hence the CSS I have had to put at the top of the page.\[code\]<style> input[class=input-large] { width: 540px; height: 24px; margin-bottom: 10px; margin-right: -7px; line-height: 30px; padding: 11px 19px; font-size: 17.5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }\[/code\]The only way I could see of getting the search button closer to the searchbar (a gap appears when you use btn-large) was to use a negative margin. Not something I am proud of, it looks very messy.I'd appreciate some guidance on this. Thanks in advance.
 
Back
Top