How to center form controls with Bootstrap - css

Question

What am I missing?
I can see the border of the container and it correctly shows the area that I have to work with.
However when I add the row (div) and offset(div) it is left justifying it.
<div id="page" class="container" style="border:solid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" class="form-control" />
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" class="form-control" />
</div>
</div>
</div>
</div>

Answer 1

I think I know what you are meaning, but I'm not sure. Do you mean like this?
If so, the class for that is:
class="text-center"
So you can change your code to this:
<div id="page" class="container" style="border:solid">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<label for="firstName">First Name:</label>
<input id="firstName" class="form-control text-center" type="text">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input id="lastName" class="form-control text-center" type="text">
</div>
</div>
</div>
Or you can add it to just the controls you want, for example just the input form controls.
Hope that helps!

Answer 2

Bootstrap can provide a great mobile experience, but desktops can also benefit from its scaffolding capabilities. So, when I develop forms I like to use the least amount of space possible. With that in mind I have improved on Demonic Penguin's code and your, as well. Like so:
<div id="page" class="container" style="border:solid">
<div class="row" style="padding-top: 12px;"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
</div>
<div class="form-group">
<input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>

Answer 3

You can also embellish your form by adding icons to the fields, like so:
<div id="page" class="container" style="border:solid">
<div class="row" style="padding-top: 12px;"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="firstName-addon"><i class="fa fa-user"></i></span>
<input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="lastName-addon"><i class="fa fa-user"></i></span>
<input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
</div>
For this implementation, you must add a FontAwesome CSS reference link to your page(s) that you can get from here: https://www.bootstrapcdn.com/fontawesome/