extending the width of bootstrap typeahead to match input field

Question

Michael Watson gave what I think is the simplest answer in his comment.

.twitter-typeahead { width: 100%; } 

Update #1: Based on the comments below (thanks Steve, Vishi), do the same for .tt-hint, .tt-input, .tt-dropdown-menu.

Update #2: mlissner reports that .tt-dropdown-menu is now .tt-menu, so the end result is

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }

The dropdown menu is a ul with the classes typeahead dropdown-menu you could use CSS to set it's width:

.dropdown-menu
{
 width: .... px;
}

The width of the span6 is not static, so you will need some media queries to make it responsive.

For Bootstrap 3 the typeahead function is remove from TB3 instead use https://github.com/twitter/typeahead.js/. You will need some additional CSS to integrate it with Twitter's Bootstrap.You'll need to load some additional CSS in order to get the typeahead.js dropdown menu to fit the default Bootstrap's theme. Try extended Bootstrap's LESS or if your are looking for a more a more extended version try: typeahead.js-bootstrap3.less.

The dropdown with is set with the .tt-dropdown-menu class now. In stead of changing the CSS you could also try to set the width dynamic. With typeahead a class of your typeahead input tag:

$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');});

To make the dropdown match the field width you'd want something like this:

$(document).on('typeahead:opened', function(event, datum) {
  var width = $(event.target).width();
  $('.tt-dropdown-menu').width(width);
});

Small improvement on the above using event.target and a global document listener.

I'm using Bootstrap 3.2.0 with typeahead.js-bootstrap3.less and nested the input in divs like this:

<div class="form-group">
    <label>my label</label>
    <div class="col-md-4">
        <div class="input-group tt-input-group">
            <input id="mytypeahead" class="form-control" />
        </div>
    </div>
</div>

I also needed to add this to my css:

.tt-input-group {
    width: 100%;
}