Bootstrap changing keyboard tab key behavior to horizontal - html

Question

Due to the boot strap design, the keyboard tab key is working vertically(col wise) instead of horizontally.
Can I make the keyboard tab key behavior horizontal(default behavior) without changing the design
This is the section of code.
<div class="col-md-4">
<div class="form-group col-md-12">
<span class="col-md-6">
<select ng-model="typeId" required=""><option value="" class="" selected="selected">--SELECT--</option>
<option label="Employment" value="number:2">Employment</option>
<option label="Female" value="number:3">Female</option>
<option label="Food" value="number:4">Food</option>
<option label="Male" value="number:1">Male</option>
</select>
</span>
</div>
<div class="form-group col-md-12" ">
<span class="col-md-6">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</span>
</div>
<div class="form-group col-md-12">
<span class="col-md-6">
<select ng-model="nId" ng-options="non.nId as non.nlity for non in List" ng-invalid-required" name="nationality" id="nationality" required="">
</select>
</span>
</div>
<div class="form-group col-md-12">
</div>
<div class="form-group col-md-12">
<label class="col-md-6" for="profession">Profession:</label>
<span class="col-md-6">
<select ng-model="rpationId" ng-options="ocp.rpationId as ocp.occupation for ocp in occupationList" >\
</select>
</span>
</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12" ng-class="{ 'has-error' : regCtrl.userForm.mmpId.$invalid && regCtrl.userForm.mmpId.$dirty }">
<label class="col-md-6" for="mmpId">MMP Id: *</label>
<span class="col-md-6">
<input type="text" name="mmpId" class="form-control ">
</span>
<div class="col-sm-6 error-color ng-scope ng-active" >
<span ng-message="required" class="ng-scope">This field is required</span>
</div>
</div>
<div class="form-group col-md-12" >
<label class="col-md-6" for="name">Name: *</label>
<span class="col-md-6">
<input type="text" name="name" ng-maxlength="250">
</span>
</div>
<div class="form-group col-md-12" >
<label class="col-md-6" for="dob">Date of Birth: *</label>
<span class="col-md-6">
<input type="date" name="dob" ng-maxlength="11">
</span>
</div>
<div class="form-group col-md-12" ng-class="">
<label class="col-md-6" for="contactNo">Contact No: *</label>
<span class="col-md-6">
<input type="number" name="contactNo" required="">
</span>
</div>
</div>

Answer 1

This is because of your grouping of the form elements. You are grouping the elements column wise hence the tab works column wise.
You have grouped 4 form elements in first col-md-4 and the next 4 in the second col-md-4 so default tab control will first cover first col-md-4 elements and then the next col-md-4 elements.
Either use tabindex or change your layout to row wise as below:
<div class="row">
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
</div>
Hope it helps.