Proper way to set two input fields side by side in Bootstrap 3 form? - css

Question

I have form with many input fields. To save users from scrolling on the medium and large screens I would like to place some of the input fields side by side. Not all the fields have to be side by side and that's why I'm not using inline form. Here is example of what I have:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmDemo" id="frmDemo">
<div class="form-group required">
<label class="control-label" for="last"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frmDemo_last" id="frmDemo_last" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="first"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frmDemo_first" id="frmDemo_first" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="plan"><span class="label label-primary">Plan:</span></label>
<select class="form-control" name="frmDemo_plan" id="frmDemo_plan">
<option value="">--Choose Plan--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="plantext"><span class="label label-primary">Plan Text:</span></label>
<input type="text" class="form-control" name="frmDemo_plantext" id="frmDemo_plantext" placeholder="Enter Plan Text" maxlength="50">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="gender"><span class="label label-primary">Gender:</span></label>
<select class="form-control" name="frmDemo_gender" id="frmDemo_gender" required>
<option value="">--Choose Gender--</option>
<option value="F">Female</option>
<option value="M">Male</option>
</select>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="gender"><span class="label label-primary">Grade:</span></label>
<select class="form-control" name="frmDemo_grade" id="frmDemo_grade" required>
<option value="">--Choose Grade--</option>
<option value="PK">PK</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frmDemo_submit" id="frmDemo_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmDemo_message" class="alert message-submit"></div>
</div>
</div>
</form>
As you can see I was able to achieve that and place the fields side by side. My question is what is the proper way to do that? My first set of fields for the Plan input use form-group div then row div and then col- div. The second set of input fields for Grade and Gender use row div and then form-group col-. Both ways work but which one is valid according to Bootstrap rules? If anyone can explain or give me suggestions I would appreciate that. Thank you.

Answer 1

That's alright. But if you want some other ways without using Bootstrap rows and columns you can target specific .form-group to style in your CSS. Personally I do these since it is much more cleaner than having many nested rows and columns. I would only use rows and columns for other purposes.
HTML:
<div class="form-group required">
<label class="control-label" for="last"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frmDemo_last" id="frmDemo_last" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="first"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frmDemo_first" id="frmDemo_first" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group">
<label class="control-label" for="plan"><span class="label label-primary">Plan:</span></label>
<select class="form-control" name="frmDemo_plan" id="frmDemo_plan">
<option value="">--Choose Plan--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="plantext"><span class="label label-primary">Plan Text:</span></label>
<input type="text" class="form-control" name="frmDemo_plantext" id="frmDemo_plantext" placeholder="Enter Plan Text" maxlength="50">
</div>
<div class="form-group">
<label class="control-label" for="gender"><span class="label label-primary">Gender:</span></label>
<select class="form-control" name="frmDemo_gender" id="frmDemo_gender" required>
<option value="">--Choose Gender--</option>
<option value="F">Female</option>
<option value="M">Male</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="gender"><span class="label label-primary">Grade:</span></label>
<select class="form-control" name="frmDemo_grade" id="frmDemo_grade" required>
<option value="">--Choose Grade--</option>
<option value="PK">PK</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>
</div>
<div class="form-group">
<button type="submit" name="frmDemo_submit" id="frmDemo_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group">
<div id="frmDemo_message" class="alert message-submit"></div>
</div>
CSS:
/* I used nth-child(n+number) pseudoclass selector since you wanted to start from the 3rd div with .form-group class to be side by side with each other. */
.form-group:nth-child(n+3) {
width:50%;
float:left;
}
.form-group:nth-child(n+3) input, .form-group:nth-child(n+3) select {
width:95%;
}