title: Bootstrap Responsive Search Engine Layout
body: <p>I'm trying to have a responsive input and a logo ontop of it using bootstrap. I tried every thing within my knowledge to do it. Columns (gridsystem), resize, etc. No matter how I do it. It turns out buggy. i.e when I size the browser window down it starts getting out of order.</p>
  
  <p>Resize the result window to see how everything is pulled out of porportion.
  <a href="http://jsfiddle.net/Cbuyn/" rel="nofollow">http://jsfiddle.net/Cbuyn/</a></p>
  
  <pre><code>    &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6 col-md-offset-3"&gt;
                  &lt;img src="http://placehold.it/500x300" class="img-responsive" alt="Responsive image"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-6 col-md-offset-3"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input type="text" class="form-control" placeholder=""&gt;
                      &lt;span class="input-group-btn"&gt;
                          &lt;button class="btn btn-default" type="submit"&gt;
                              &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This is done with Bootstrap 3. I'm out of ideas..</p>