title: Twitter Typeahead moves input field
body: <p>I just implemented twitter typeahead into my website. I am using bootstrap in this website. I have input fields and once I added the titter typeahead code it moved the input field. </p>
  
  <p>(I know this question has already been asked but he didn't provide code so no answers were given)</p>
  
  <p><a href="https://i.stack.imgur.com/IysgF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IysgF.png" alt="What it looks like atm"></a></p>
  
  <p><a href="https://i.stack.imgur.com/As5RE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/As5RE.png" alt="What I want it to look like (what is supposed to look like)"></a></p>
  
  <p>I used the code from the example page (changed the class names and stuff)</p>
  
  <pre><code>var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
  var matches, substringRegex;
  
  // an array that will be populated with substring matches
  matches = [];
  
  // regex used to determine if a string contains the substring `q`
  substrRegex = new RegExp(q, 'i');
  
  // iterate through the pool of strings and for any string that
  // contains the substring `q`, add it to the `matches` array
  $.each(strs, function(i, str) {
    if (substrRegex.test(str)) {
      matches.push(str);
    }
  });
      cb(matches);
    };
  };
  
  var states = (My data)
  
  $('#the-basics .typeahead').typeahead({
     hint: true,
     highlight: true,
     minLength: 1
   },
   {
   name: 'states',
   source: substringMatcher(states)
   });
  </code></pre>
  
  <p>twitter.github.io/typeahead.js/examples/</p>