title: Bootstrap 3.3.0 + Typeahead inside form-control
body: <p>I have an ASP.NET MVC 5 application with the following packages:</p>
  
  <ul>
  <li>Typeahead.js</li>
  <li>Typeahead.js for MVC 5</li>
  <li>typeahead.js-bootstrap.css</li>
  <li>Bootstrap (3.3.0)</li>
  </ul>
  
  <p>I'm having trouble rendering the autocomplete input text correctly in the page (below the other input  and aligned).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="form-group"&gt;
          &lt;div class="col-sm-10"&gt;
              &lt;label class="control-label col-sm-2"&gt;Name&lt;/label&gt;
              &lt;input class="form-control" type="text"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-sm-10"&gt;
              &lt;label class="control-label col-sm-2"&gt;Test&lt;/label&gt;
              &lt;input id="search" class="form-control" type="text" placeholder="test"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
   var engine = new Bloodhound({
       datumTokenizer: function (d) { return d.value; },
       queryTokenizer: Bloodhound.tokenizers.whitespace,
       local: [{ value: 'dog animal' }, { value: 'pig animal' }, { value: 'moose animal' }, { value: 'bird ' }]
   });
  
   engine.initialize();
  
   $('#search').typeahead(null, {
       name: 'animals',
       source: engine.ttAdapter()
   })
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>PAGE</strong></p>
  
  <p><img src="https://i.stack.imgur.com/DawR7.png" alt="Page Rendering"></p>