How to make labels and inputs on the same row? - css

Question

I use Bootstrap 3 in my project.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row well well-sm">
<div class="col-xs-2">
<label for="txtMonth"> month:</label>
<input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" />
</div>
<div class="col-xs-3">
<label for="txtMonth"> year:</label>
<input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
</div>
<div class="col-xs-2">
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
</div>
</div>
As you can see each input number has label, but the label and input not on the same row how to make label and input show on a single row?

Answer 1

use col-xs-4[label] in your label and create new div for and col-xs-8 [input div]
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row well well-sm">
<div class="col-xs-5">
<label class="col-xs-4" for="txtMonth"> month:</label>
<div class="col-xs-8">
<input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" />
</div>
</div>
<div class="col-xs-5">
<label class="col-xs-4" for="txtMonth"> year:</label>
<div class="col-xs-8">
<input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
</div>
</div>
<div class="col-xs-2">
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
</div>
</div>

Answer 2

Just use the form-inline to align your label and input inline as below.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-inline">
<div class="well well-sm">
<div class="form-group">
<label for="txtMonth"> month:</label>
<input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" />
</div>
<div class="form-group">
<label for="txtMonth"> year:</label>
<input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
</div>
<div class="form-group">
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
</div>
</div>
</form>

Answer 3

You need to wrap you Code into a div with CSS class of form-group like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row well well-sm">
<div class="form-group">
<label class="col-xs-2" for="txtMonth"> month:</label>
<div class="col-xs-2">
<input type="number" class="form-control input-sm" id="txtMonth" ng-model="month"/>
</div>
<label class="col-xs-2" for="txtMonth"> year:</label>
<div class="col-xs-2">
<input type="number" class="form-control input-sm" id="txtYear" ng-model="year"/>
</div>
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter"/>
</div>
</div>

Answer 4

It is because of the form-control class having width:100% and display:block properties. If you overwrite this one that will work automatically.
Also Increase the xs values for fixing the label and text boxes in a same row.
Apply some new class and override the above properties like below.
.newclass {
display:inline-block;
width:auto;
}
<div class="row well well-sm">
<div class="col-xs-5">
<label for="txtMonth"> month:</label>
<input type="number" class="form-control newclass input-sm" id="txtMonth" ng-model="month" />
</div>
<div class="col-xs-5">
<label for="txtMonth"> year:</label>
<input type="number" class="form-control newclass input-sm" id="txtYear" ng-model="year" />
</div>
<div class="col-xs-2">
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
</div>
</div>
DEMO

Answer 5

Hope it will work
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-12">
<label for="txtMonth" class="col-xs-2"> month:</label>
<label for="txtMonth" class="col-xs-3"> year:</label>
<div class="col-xs-7">
</div>
</div>
<div class="col-xs-12">
<div class="col-xs-2">
<input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" />
</div>
<div class="col-xs-3">
<input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
</div>
<div class="col-xs-2">
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
</div>
<div class="col-xs-5">
</div>
</div>