Bootstrap 3 inline layout not working - html

Question

I'm using the following markup with Bootstrap 3.
<div class="row" style="margin-bottom: 12px">
<form class="form-inline">
<div class="form-group">
<label for="startDate">Start Date:</label>
<input type="date" class="form-control" id="startDate" value="10/29/1961" placeholder="Start Date">
</div>
<div class="form-group">
<label for="endDate">End Date:</label>
<input type="date" class="form-control" id="endDate" value="11/2/1972" placeholder="End Date">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
According to all the examples I could find, this should put everything inline. However, for me, the labels appear over the textboxes rather than to the side of them.
I tried not enclosing the markup with <div class="row">. I also tried using <input type="text"> instead of <input type="date"> but none of that made any difference. I've triple checked the markup. Can anyone see what I'm doing wrong?
If I force the containers to be wider, then it appears closer to what I expect. But none of the examples I've seen do this. And I'd prefer to not specify a fixed width.

Answer 1

This is due to the version of Bootstrap 3 that you are using. The form-control class changed to width: auto within inline forms in v3.1.0. So versions v3.0.0, v3.0.1, v3.0.2 and v3.0.3 should all display the problem you are seeing. After the v3.1.0 release it should no longer be a problem.
From the release notes:
#11836: Along with the form validation update, we reset some key form and icon styles:
All .form-controls within inline forms are set to width: auto; to prevent stacking of .form-label within a .form-group.
Removes all select.form-control settings since those are now inherited by the above change
Removes the width: 1em; from the Glyphicons because it was virtually impossible to override.
Any version between 3.1.0 and the current 3.3.6 should work as you expect.
That being said, if you cannot upgrade you can still implement this on your own. See 3rd Snippet.
Example of the issue with v3.0.0
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="startDate">Start Date:</label>
<input type="date" class="form-control" id="startDate" value="10/29/1961" placeholder="Start Date">
</div>
<div class="form-group">
<label for="endDate">End Date:</label>
<input type="date" class="form-control" id="endDate" value="11/2/1972" placeholder="End Date">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
Example of expected behavior with v3.1.0
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="startDate">Start Date:</label>
<input type="date" class="form-control" id="startDate" value="10/29/1961" placeholder="Start Date">
</div>
<div class="form-group">
<label for="endDate">End Date:</label>
<input type="date" class="form-control" id="endDate" value="11/2/1972" placeholder="End Date">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
Example using v3.0.0 with fix:
#media (min-width: 768px) {
.form-inline .form-control {
width: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="startDate">Start Date:</label>
<input type="date" class="form-control" id="startDate" value="10/29/1961" placeholder="Start Date">
</div>
<div class="form-group">
<label for="endDate">End Date:</label>
<input type="date" class="form-control" id="endDate" value="11/2/1972" placeholder="End Date">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
All current form-inline css just in case:
#media (min-width: 768px) {
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle
}
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle
}
.form-inline .form-control-static {
display: inline-block
}
.form-inline .input-group {
display: inline-table;
vertical-align: middle
}
.form-inline .input-group .form-control,
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn {
width: auto
}
.form-inline .input-group>.form-control {
width: 100%
}
.form-inline .control-label {
margin-bottom: 0;
vertical-align: middle
}
.form-inline .checkbox,
.form-inline .radio {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle
}
.form-inline .checkbox label,
.form-inline .radio label {
padding-left: 0
}
.form-inline .checkbox input[type=checkbox],
.form-inline .radio input[type=radio] {
position: relative;
margin-left: 0
}
.form-inline .has-feedback .form-control-feedback {
top: 0
}
}

Answer 2

your code is fine ,, but note that
Controls only appear inline in viewports that are at least 768px wide to account for narrow viewports on mobile devices.
here is my screenshot for your code

Answer 3

I've run into this issue in the past when I was using mvc to add my textboxes. I solved this issue by overriding the form-group class or by using an inline style on the div to set display: flex; This would force it into one line.
<div class="form-group" style="display:flex;">
<label for="startDate">Start Date:</label>
<input type="date" class="form-control" id="startDate" value="10/29/1961" placeholder="Start Date">
</div>