I am trying to display three small text box elements within horizontal form group class. using code
<div class="form-group">
<label class="col-lg-3 control-label input-sm">Date of Birth:</label>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-4">
<input type="text" id="txt_month" name="txt_month" class="form-control input-sm" placeholder="MM" required maxlength="2" data-validation-required-message="Month is required" >
</div>
<div class="col-lg-4">
<input type="text" id="txt_day" name="txt_day" class="form-control input-sm" placeholder="DD" required maxlength="2" data-validation-required-message="Day is required" >
</div>
<div class="col-lg-4">
<input type="text" id="txt_year" name="txt_year" class="form-control input-sm" placeholder="YY" required maxlength="4" data-validation-required-message="Year is required" >
</div>
</div>
<p class="help-block"></p>
</div>
</div>
Result:
Is there a better approach to display multiple text boxes near to each other. Rest of elements in form display horizontally.
Update#
After using inline form class with lots of other modifications, i got proper result. here is updated code.
<div class="form-group">
<label class="col-lg-3 control-label input-sm">Date of Birth:</label>
<div class="col-lg-7">
<div class="form-inline">
<div class="form-group ">
<div class="col-lg-3">
<label class="sronly" for="txt_month">Enter Month</label>
<input type="text" id="txt_month" name="txt_month" class="form-control input-sm" style="width:60px" placeholder="MM" required maxlength="2" data-validation-required-message="Month is required" >
</div>
</div>
<div class="form-group">
<div class="col-lg-3">
<label class="sronly" for="txt_day">Enter Day</label>
<input type="text" id="txt_day" name="txt_day" class="form-control input-sm" style="width:60px" placeholder="DD" required maxlength="2" data-validation-required-message="Day is required" >
</div>
</div>
<div class="form-group">
<div class="col-lg-3">
<label class="sronly" for="txt_year">Enter Year</label>
<input type="text" id="txt_year" name="txt_year" class="form-control input-sm" style="width:60px" placeholder="YY" required maxlength="4" data-validation-required-message="Year is required" >
</div>
</div>
</div>
<p class="help-block"></p>
</div>
</div>
Correct Result:
Horizontal formCreate horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label> s as well so they're vertically centered with their associated form controls.
By adding the ” text-center” class of Bootstrap 3 We can use the “text-center” class of bootstrap 3 for the center-alignment of an element. So in our td when we add “text-center” class, and then our table text goes to the center.
In an inline form, all of the elements are inline, left-aligned, and the labels are alongside. Note: This only applies to forms within viewports that are at least 768px wide! Additional rule for an inline form: Add class . form-inline to the <form> element.
input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text". The . input-group-addon class attaches an icon or help text next to the input field.
This answer really helped me work out my form with BS3.
However I wanted it to look like this:
So, I amended the above and added the 'sr-only' class to the labels I wanted to hide (so screen-readers still pick them up), and changed the col sizes.
(NOTE: the OP uses 'sronly' class not the 'sr-only' class which doesn't work for me)
<div class="form-group">
<label class="col-lg-3 control-label ">City & County:</label>
<div class="col-lg-9">
<div class="form-inline">
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="city">City</label>
<input type="text" id="city" name="city" class="form-control " placeholder="E.g. Manchester" >
</div>
</div>
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="county">County</label>
<input type="text" id="county" name="county" class="form-control " placeholder="E.g. Lancashire" >
</div>
</div>
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With