Home/ Questions/Q 8454665
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T12:05:10+00:00

I am attempting to use Twitter Bootstrap input-append search and it’s not lining up

  • 0

I am attempting to use Twitter Bootstrap input-append search and it’s not lining up the text box and the search button. I’ve grabbed Twitters latest and greatest 2.1 bootstrap from August 20th (grabbed today). so things like “white-space: nowrap;” are already set.

Any ideas?

Code:

<li class="dropdown">
<a class="dropdown-toggle" id="Search" role="button" data-toggle="dropdown" href="#">Search<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" ara-labelledby="Search">
 <form class="form-search">
  <div class="input-append">
   <input type="text" class="search-query">
   <button type="submit" class="btn"><i class="icon-search"></i></button>
  </div>
 </form>
</ul>
</li>

Sample Image:

Sample Image

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are missing a proper doctype declaration. You need <!DOCTYPE html> over <html>, that’s what causing the abnormality.

    Tip

    I also had a look at http://collecthw.com/ci, I would strongly suggest you use http://validator.w3.org/, there are a lot of errors in the markup. Cases of <div><form></div></form> which obviously ain’t good. I could also spot multiple <body> tags along with multiple versions of jquery.

    I also think the markup is totally different from what bootstrap offers. Modal markup in a dropdown don’t seem to be a proper thing to do.
    If you follow the markup provided by bootstrap, and extend upon that if you wish, everything will be so much easier for you 🙂

    • 0