Bootstrap form fields not aligning in layout - html

Question

I want a form in Bootstrap that renders two text fields on the same line, with text following each input:
Label 1A Input 1A Text 1A Label 1B Input 1B Text 1B
Label 2A Input 2A Text 2A Label 2B Input 2B Text 2B
Basically, the two inputs on the same line are related, so I want them next to each other. I've sort of accomplished that using this markup:
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<label for="input2_max" class="control-label"></label>
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>
Also see this fiddle. If you widen the HTML output you should see the effect I'm describing.
The problem with this is the form fields are not aligned, and the layout gets really screwy for small screen sizes.
First and foremost, I'd like the fields to all align nicely when viewed in a standard desktop browser. I've tried various classes with no success.
But if there's a better way to do this, I'd love to hear that too.
Thank you for any and all help!

Answer 1

If I understand what you want it will work.
Try this approach:
The idea is playing with the grid, dividing each row (using grid´s bootstrap) and inside of each row, dividing again as you need.
It should be enough, but if you have any problem, you can add pull-right and pull-left class where you need it. These classes set to left or right inside a column of grid´s bootstrap.
Besides, you can add this style or class for being secure you are not overlapping layers/div.
white-space : nowrap;
<form class="form-inline" role="form">
<div class="form-group col-lg-6 col-md-6 col-xs-6">
<div class="form-group col-lg-8 col-md-8 col-xs-8">
<label for="input1" class="control-label first-label pull-left">ABCDEFG</label>
<input type="text" name="input1" id="input1" class="pull-right"> units
</div>
<div class="form-group col-lg-4 col-md-4 col-xs-4">
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max" class="pull-right"> units
</div>
</div>
<div class="form-group col-lg-6 col-md-6 col-xs-6 pull-right">
<!-- REPEAT THE SAME IDEA -->
</div>
</form>
With this code, you have one row with 2 parts with the same size. Inside the first part you have two part as well, one of them double than the other one. Inside of these part, you have a label at the left(pull-left) and it input at thee right(pull-right).
If you have any doubt, please let me know.
Cheers mate

Answer 2

<style>
label { width: 12%; }
</style>
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>

Answer 3

To align them input boxes you need to set equal width on the labels. As the labels are inline element, while your labels got different texts their sizes will be different so the following boxes will be just right after it.
For the above example you can have this following
label{
width: 80px;
}
But the above css will widen the width of the text "units" to solve this you may update your markup a bit by assigning class to the not equal labels & then declaring width on them like the follwoing
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label first-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label first-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<label for="input2_max" class="control-label"></label>
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>
And assigning width to the class
.first-label{
width: 80px;
}
There is one more solution without the markup change
.form-group label:first-of-type{
width: 80px;
}

Answer 4

Need to add a fixed width for your control-label
.control-label {
width: 15%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">Label 1A</label>
<input type="text" name="input1" id="input1">units
<label for="input1_max" class="control-label">Label 1B</label>
<input type="text" name="input1_max" id="input1_max">units
</div>
<div class="form-group">
<label for="input2" class="control-label">Label 2A</label>
<input type="text" name="input2" id="input2">units
<label for="input2_max" class="control-label">Label 2B</label>
<input type="text" name="input2_max" id="input2_max">units
</div>
</div>
</form>

Answer 5

try this code it may solve your problem.you need to define cols inside row .so in this i define 2 row and each of them have 4 column for mobile as well as desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="inline-form">
<div class="form-group">
<div class="row">
<div class="col-md-3 col-xs-3 ">
<label for="input1" class="control-label">ABCDE35</label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input1" id="input1"> units
</div>
<div class="col-md-3 col-xs-3 ">
<label for="input1_max" class="control-label"></label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input1_max" id="input1_max"> units
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-xs-3 ">
<label for="input2" class="control-label">ABCD</label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input3" id="input3"> units
</div>
<div class="col-md-3 col-xs-3 ">
<label for="input3_max" class="control-label"></label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input3_max" id="input3_max"> units
</div>
</div>
</div>
</form>
</body>
</html>