How to align bootstrap form inputs - css

Question

I am trying to align some inputs in my modal. I am trying to set this up the proper way. I have looked and found many examples but they are not working with mine. I understand the bootstrap site says to use form-inline but I dont need my entire form setup like that. I just want the City/State/Zipcode inline with each other. Also you will see a checkbox on the top right corner. I have moved it to the right with a margin-left, but it messes up the responsiveness of it. What is the best way to do this?
plunkr
<div class="form-group clearfix inline">
<label class="col-sm-3 control-label text-right">City</label>
<div class="col-sm-9">
<input style="width:200px" ng-model="customer.city" type="text" class="form-control input-md">
</div>
<label class="col-sm-3 control-label text-right" for="customerSt">State</label>
<div class="col-sm-9">
<select style="width:200px" ng-model="customer.st" class="form-control" ng-options="s.abbr as s.name for s in states">
<option value="">-- Select a State --</option>
</select>
</div>
<label class="col-sm-3 control-label text-right">Zipcode</label>
<div class="col-sm-9">
<input style="width:200px" ng-model="customer.zip" type="text" class="form-control input-md">
</div>
</div>
CheckBox
<div class="form-group clearfix" style="margin-left:520px">
<label class="col-sm-3 control-label text-right">Status</label>
<div class="col-sm-9">
<input style="width:50px" type="checkbox" ng-model="job.status" value="" class="form-control">
</div>

Answer 1

You would need to modify a little css and use nested columns.
This is an example of nesting columns in a form. You can use the same ideas to adjust your form.
DEMO: http://jsbin.com/kemumu/1/
Regarding the checkbox that you pushed into place with margin. If it looks good at 900px but strange at under that width, then put css in a min-width media query where it looks good and remove it outside the media query.
Notes: .form-group puts some nice vertical spacing when a form is stacked (in smaller viewports) but it also acts like a .row (with its negative -left and -right margins), so this css when it's used on a column (as I have done) gets adjusted. Plus the gutter which is 30px is too big for a form.
There's no need to put .clearfix on your .form-groups unless you've floated them for some reason.
CSS EXAMPLE:
.custom-form [class*="col-"].form-group {margin-left:0;margin-right:0;}
.custom-form .form-group [class*="col-"] .row [class*="col-"] {
padding-left: .5%;
padding-right: .5%;
}
.custom-form .form-group [class*="col-"] .row {
margin-left: -.5%;
margin-right: -.5%;
}
HTML EXAMPLE:
<form class="form-horizontal custom-form" role="form">
<div class="form-group">
<label class="col-sm-3 control-label">Card Holder's Name</label>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-6 form-group">
<input type="text" class="form-control" autocomplete="off" maxlength="4" placeholder="First Name" required>
</div><!--nested col-sm-6-->
<div class="col-sm-6 form-group">
<input type="text" class="form-control" autocomplete="off" maxlength="4" placeholder="Last Name" required>
</div><!--nested col-sm-6-->
</div><!-- /.form-group > .row -->
</div><!-- /.col-sm-9 -->
</div><!-- /.form-group -->
<div class="form-group">
<label class="col-sm-3 control-label">Credit Card Number:</label>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-3 form-group">
<input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="1st four digits" required>
</div>
<!--nested col-sm-3-->
<div class="col-sm-3 form-group">
<input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="2nd four digits" required>
</div>
<!--nested col-sm-3-->
<div class="col-sm-3 form-group">
<input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="3rd four digits" required>
</div>
<!--nested col-sm-3-->
<div class="col-sm-3">
<input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="4th four digits" required>
</div>
<!--nested col-sm-3-->
</div><!-- /.form-group > .row -->
</div><!-- /.col-sm-9 -->
</div><!-- /.form-group -->
<div class="form-group">
<label class="col-sm-3 control-label">Expiration Date:</label>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-9 form-group">
<select class="form-control">
<option>January</option>
<option>...</option>
<option>December</option>
</select>
</div>
<!--nested col-sm-9-->
<div class="col-sm-3 form-group">
<select class="form-control">
<option>2013</option>
<option>...</option>
<option>2015</option>
</select>
</div>
<!--nested col-sm-3-->
</div><!-- /.form-group > .row -->
</div><!-- /.col-sm-9 -->
</div><!-- /.form-group -->
<div class="form-group">
<label class="col-sm-3 control-label">CVV Code:</label>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" autocomplete="off" maxlength="3" pattern="\d3" placeholder="3 digits on back of card" required>
</div><!--nested col-sm-4-->
</div><!-- /.form-group > .row -->
</div><!-- /.col-sm-9 -->
</div><!-- /.form-group -->
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary btn-custom">Submit</button>
<button type="button" class="btn btn-default btn-custom">Cancel</button>
</div><!-- /.col-sm-offset-3 col-sm-9 -->
</div><!-- /.form-group -->
</form><!-- /.form-horizontal -->
</div><!-- /.container -->
**

Answer 2

If you want responsiveness in your site, then make/add different css and add them to different scree size.. for example..
<h2 class="visible-sm visible-md visible-lg">Some text here</h2>
The above h2 heading will show on only tablet,s smart TV's, laptop's desktops etc....
<h4 class="visible-xs">Some text here</h4>
When you see the same heading on small devices like smart phone's, or smaller, then it adjust it size according to the specified and only show on small devices....
Note: Please Read the twitter bootstrap documentation about responsiveness here

Answer 3

I had to add some custom css classes to do that. For example
#media (min-width: 768px) {
.input-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.input-inline .form-control {
display: inline-block;
}
.input-inline select.form-control {
width: auto;
}
.input-inline .radio,
.input-inline .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.input-inline .radio input[type="radio"],
.input-inline .checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
}
}
So no i do not add the form-inline class at my form. When i need an inline input I write the following:
<div class="form-group input-inline">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="text" class="form-control">
<div>
I might have missed copying something from my code but this is the general idea. You just need to copy from bootstrap the .form-inline values and replace it with .input-inline.