CSS issue on Twitter Typeahead with Bootstrap 3

EDIT: Updated for Bootstrap 3.0EDIT 2: Typeahead call was modified. See new jsfiddle

After playing around with the styling it looks like the form-control class doesn't quite line-up with the tt-hint. So I made sure the margins and borders line up. Taking Hieu Nguyen's answer and adding border-radius and support for input-small/input-large

CSS

.twitter-typeahead .tt-hint{    display: block;    height: 34px;    padding: 6px 12px;    font-size: 14px;    line-height: 1.428571429;    border: 1px solid transparent;    border-radius:4px;}.twitter-typeahead .hint-small{    height: 30px;    padding: 5px 10px;    font-size: 12px;    border-radius: 3px;    line-height: 1.5;}.twitter-typeahead .hint-large{    height: 45px;    padding: 10px 16px;    font-size: 18px;    border-radius: 6px;    line-height: 1.33;}

Script for input-small/input-large

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

Updated jsfiddle: http://jsfiddle.net/KrtB5/542/

Hmm it looks like .form-control is a new class in Bootstrap 3 RC and it's a culprit of this issue (no doubt this is only RC version with many issues), you can just copy style of that class to .tt-hint class. So:

.twitter-typeahead .tt-hint {    display: block;    height: 38px;    padding: 8px 12px;    font-size: 14px;    line-height: 1.428571429;    border: 1px solid transparent;}

Working fiddle: http://jsfiddle.net/KrtB5/2/

Update which works better with jQuery 1.9.1 and Bootstrap 3.0.0: http://jsfiddle.net/KrtB5/13

Check this out:

$('#foo').typeahead(...);$('.tt-hint').addClass('form-control');