HTML Content Not Centering on Narrow Screens - html

Question

I am using Bootstrap 3, and coding mainly for mobile websites. I am having trouble centering content when I don't want it to take up the whole line. When the screen is larger than a certain width, it doesn't get centered, & when it is smaller than that width (especially at the size we are optimizing it for), it won't even come away from the left border of the page. Also, some elements keep jumping in size when they get to be a certain size. I assume that last one is normal behavior, but can't for the life of me figure out why.
HTML:
<div class="col-xs-12">
<div class="container">
<div class="form-group col-xs-11">
<div class="col-xs-5 pull-left">
<input type="text" class='form-control' id="firstName" name="firstName" placeholder="First Name" required />
</div>
<div class="col-xs-5 pull-right">
<input type="text" class='form-control' id="lastName" name="lastName" placeholder="Last Name" required />
</div>
</div>
</div>
<div class="form-group">
<input type="email" class='form-control' id="email" name="email" placeholder="Email" required />
</div>
</div>
The #media's in bootstrap-custom.css are:
#media (min-width 1200)
.container {
max-width: 1140px;
}
#media (min-width 992)
.container {
max-width: 940px;
}
#media (min-width 768)
.container {
max-width: 720px;
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 0;
padding-right: 0;
}
I'm not sure if that's the right/accepted way to quote them.
I also have the rest of the bootstrap-custom.css, if you need that for your answer.
P.S. The whole reason I didn't have the first row (with firstName & lastName) take up the whole line is because I don't want it to. I wanted that row to be in the middle with space on either side.
P.P.S. Here is a fiddle.

Answer 1

Disclaimer: I haven't done any Bootstrap before - I'm just stabbing in the dark.
For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
So, I changed your col-xs-5 elements to col-xs-6 so that they would add up to twelve, and therefore take up 100% of the row's width together. I moved your email input field into the .container and added the col-xs-11 class in order for it to mirror the other form-group's left and right margin. I wrapped your email input field in a div (as you had done with the other fields), and added the col-xs-12 class to make it stretch to 100% of its parent row's width.
Here is a fiddle.
Also, some elements keep jumping in size when they get to be a certain
size. I assume that last one is normal behavior, but can't for the
life of me figure out why.
Here is an updated fiddle that employs CSS3 transitions to ease between your different max-widths.

Answer 2

Have you tried text-align:centre; to your container class?

Answer 3

I think you need to change your markup a little. Wrap everything inside a container and make your form-group as rows..
For example:
<div class="container">
<div class="col-xs-12">
<div class="row form-group">
<div class="col-xs-6">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
</div>
<div class="col-xs-6 pull-right">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-12">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required="">
</div>
</div>
</div>
</div>
Working demo: http://bootply.com/86294
P.S. - Take a look at Option #2 in the demo so that your inputs don't get too small. This will allow them to stack vertically on the smallest screens.