Issue rendering form on mobile Bootstrap3 - html

Question

For some this will be quite easy, I have the following web page which is exactly what I'm looking for, which aligns in the middle of the page
But when I minimize this down to see how it renders when on a mobile screen it looks like this
How on earth is someone going to write an email address in that? can someone tell me what I'm doing wrong, this is my HTML
<div class="row">
<div class="container">
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { #class = "form-inline" }))
{
<div class="row">
<div class="col-xs-12 text-center">
<p class="text-center">
<strong>Enter your email and get special information:</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<div class="input-group input-group">
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", placeholder = "Email address" })
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Submit</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-xs-12 -->
<div class="col-xs-3"></div>
</div><!-- /.row -->
}
</div>

Answer 1

Use more than just the XS (extra-small screens) grid when specifying columns
Don't waste space on blank columns on XS screens.
Try something like:
<div class="row">
<div class="hidden-xs col-sm-3"></div>
<div class="col-xs-12 col-sm-6">
<div class="input-group input-group">
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", placeholder = "Email address" })
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Submit</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /col -->
<div class="hidden-xs col-sm-3"></div>
</div><!-- /.row -->
Bumped the input-group up to a full row on XS screens
Only started making the input-group narrower on SM (small) screens