I am having trouble aligning a series of elements horizontally using bootstrap as shown in the example image below:
Whenever I add the "form-control" class to the input element, it gets pushed down below the other elements. I have experimented with different combinations of classes and styles but can't seem to get it right.
Below is the original HTML code:
<div class="row">
<div class="form-group col-xs-12 col-md-5 col-lg-6">
<label class="control-label">
Unique ID @Model.Ordering:
<input class="form-control" type="number" required />
</label>
<strong>Name:</strong> @Model.Name
<strong>DOB:</strong> @Model.DateOfBirth
<strong>Gender: </strong>@Model.Gender
</div>
</div>
And here is my revised code which now displays correctly:
<div class="row">
<div class="form-group form-inline">
<div class="form-group">
<label class="control-label">
Unique ID @Model.Ordering:
</label>
</div>
<div class="form-group">
<input class="form-control" type="number" />
</div>
<div class="form-group">
<strong>Name:</strong> @Model.Name
</div>
<div class="form-group">
<strong>DOB:</strong> @Model.DateOfBirth
</div>
<div class="form-group">
<strong>Gender: </strong>@Model.Gender
</div>
</div>
</div>