Bootstrap Responsive Search Engine Layout - html

Question

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.
Resize the result window to see how everything is pulled out of porportion.
http://jsfiddle.net/Cbuyn/
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="http://placehold.it/500x300" class="img-responsive" alt="Responsive image">
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
This is done with Bootstrap 3. I'm out of ideas..

Answer 1

If you want to center your image (assuming you add an id="main-img" to the image):
#main-img {
margin-left: auto;
margin-right: auto;
}
jsFiddle Demo (image centered)
If you want to make the image full width:
#main-img {
width: 100%;
}
jsFiddle Demo (image full width) (Updated as per comments)

Answer 2

I see from the comments that you have a solution. That said, the following works fine without adding the additional classes. It will be 100% at xs and sm sizes, then beginning at the md size, it will be 50% of the container. Remember, responsive isn't about people resizing their browser, it's about different device sizes. Most people (other than developers who build responsive websites and are trying to test them) don't resize their browsers when they are looking at a page. Also, if you're on a mobile type device, in most cases you can't resize your browser. So, if you want the 992px (md) and up viewports to see the input/image at only 50% of the container, your code was perfectly fine.
DEMO
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="http://placehold.it/500x300" class="img-responsive" alt="Responsive image" />
</div>
<div class="col-md-6 col-md-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
As #dan stated, if you want the image to be the same width as the input you can add:
img {
width: 100%;
}
or to center it and make it remain no larger than it's max-size:
img {
display: block;
margin: auto:
}