It appears that the .form-control is a newly introduced class in Bootstrap 3 RC and seems to be causing this issue (which is expected as RC versions often have many issues). To resolve this, you can simply replicate the style of that class for the .tt-hint class. Here's how:

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

Here is a working fiddle demonstrating the solution: http://jsfiddle.net/KrtB5/2/

Update: I have made an improvement that works better with jQuery 1.9.1 and Bootstrap 3.0.0: http://jsfiddle.net/KrtB5/13

Here's something interesting for you:

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

For those interested, there is also an unauthorized adaptation of the Bootstrap 2 typeahead plugin available:

Check out Bootstrap 3 Typeahead here

This version does not need any extra CSS files and is fully compatible with the most recent edition of Bootstrap.

If you want to see a demonstration, click on this demo link for Plunker.

If you're working with bootstrap.less, the process is much simpler. Bootstrap 3 comes with LESS 1.4.1 which now includes the 'extend' feature. Check out this tutorial on using a span3 (or any spanX number) class as a mixin in Less and Bootstrap.

'Extend' is a powerful tool in LESS that allows for full inheritance of explicitly named classes. You no longer need to manually copy properties like in Hieu Nguyen's and Nick P's CSS solutions. The following code snippet demonstrates how LESS takes care of it all:

.twitter-typeahead .tt-hint:extend(.form-control all)
{}

The original typeahead.js-bootstrap.less code on GitHub is outdated for Bootstrap 3. I used it as a foundation but also tweaked it to prevent word wrapping in the dropdown list, similar to BS 2 typeahead. Here's my finalized less file:

.tt-dropdown-menu
{
    /* CSS styles go here */
}

.tt-suggestion
{
    /* Additional styling for suggestions */
}

    .tt-suggestion.tt-is-under-cursor
    {
        /* Styling for cursor hover state */
    }

        .tt-suggestion.tt-is-under-cursor a
        {
            /* More styling for anchor elements */
        }

    .tt-suggestion > p
    {
        /* Paragraph styling */
    }

/* Additional CSS rules */

.twitter-typeahead
{
    /* Styling for Twitter typeahead */
}

.twitter-typeahead .tt-hint:extend(.form-control all)
{
    /* Custom styling for hint text */
}

The issue is not limited to just .tt-hint being broken, but also affects other CSS classes.

To resolve this problem and ensure compatibility across all browsers, it is recommended to include additional CSS that addresses the conflicts between Typeahead.js and Bootstrap 3:

https://github.com/jharding/typeahead.js-bootstrap.css

A detailed resolution (as suggested in this issue discussion on Typeahead)

https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.css

/*
 * typehead.js-bootstrap3.less
 * @version 0.2.3
 * https://github.com/hyspace/typeahead.js-bootstrap3.less
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
.has-warning .twitter-typeahead .tt-input,
.has-warning .twitter-typeahead .tt-hint {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .twitter-typeahead .tt-input:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-error .twitter-typeahead .tt-input,
.has-error .twitter-typeahead .tt-hint {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-input:focus,
.has-error .twitter-typeahead .tt-hint:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
...

After some trial and error, I managed to make it work. Adjusting the top and left values may be necessary for your specific case.

$('#typeahead').typeahead(...);
$(".tt-hint").css('top','3px');
$(".tt-hint").css('left','1px');

After considering Andreas's input, I would recommend the following approach to optimize usage:

.tt-hint { 
   .form-control;
}

To solve the issue, I decided to enhance my form-group element by including an additional CSS class called "form-group-lg".

Here is a snippet of my HTML code:

<div class="form-group form-group-lg">
  <label class="control-label" for="my-large-typeahead">Type to autocomplete:</label>
  <input type="text" class="form-control typeahead" id="my-large-typeahead">
</div>

In my SCSS file, I made the following adjustment:

.form-group-lg .tt-hint
{
    @extend .input-lg;
}

According to a post from Typeahead problems with Bootstrap 3.0 RC1, [laurent-wartel][2] suggested trying out additional CSS options like https://github.com/hyspace/typeahead.js-bootstrap3.less or https://github.com/bassjobsen/Bootstrap-3-Typeahead to integrate typeahead.js with Bootstrap 3.1.0.

Alternatively, you can also use the "old" (TB 2) plugin in combination with the new Bloodhound suggestion engine by referring to https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

A streamlined solution for a neater code

.tt-small {

    .twitter-typeahead {

        display: block !important; // Important: Override inline styles set by JavaScript

        &> .tt-hint {

            &:extend(.form-control);

            color: @medium-gray;

        }
    }
}

Here is an example of how the HTML markup might look:

<div class="form-group">
    <label class="col-lg-3 col-sm-3 control-label" for="mydropdown">Dropdown</label>
    <div class="col-lg-6 col-sm-6 tt-mydropdown tt-small">
        <input class="form-control" id="mydropdown" placeholder="Dropdown" type="text">
    </div> <!-- tt-small end -->
</div>

Here is an alternative method to integrate Twitter Typeahead with Bootstrap 3.

// To ensure our stylesheets can override inline styles from Twitter Typeahead, we use jQuery to remove them.
$('.twitter-typeahead, .typeahead').attr('style',''); 

Next, in your LESS stylesheet, include the following:

// Styles for Twitter Typeahead

.twitter-typeahead {
  position: relative;

  .tt-hint {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: @input-bg;
    border: none;
  }

  .tt-input {
    position: relative;
    vertical-align: top;
  }

  .tt-hint + .tt-input {
    background-color: transparent;
  }

  .tt-dropdown-menu {
    &:extend(.dropdown-menu all);
  }

  .tt-suggestion {
    &:extend(.dropdown-menu > li > a all);
    p {
      margin-bottom: 0;
    }
  }

  .tt-cursor {
    &:extend(.dropdown-menu > .active > a all);
  }

}

Skip the hassle of using complex setups, simply include

style="position: relative"

In the parent element. It's utilizing absolute positioning, it only requires clarification on which "absolute" you mean.