CODEWITHSUNDEEP
csstwitter-bootstrap
Michael
Michael

Reputation: 13616

How to make labels and inputs on the same row?

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?

Upvotes: 0

Views: 212

Answers (5)

Bhuwan
Bhuwan

Reputation: 16855

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>

Upvotes: 1

nazmul.3026
nazmul.3026

Reputation: 1008

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>

Upvotes: 0

Kalaiselvan
Kalaiselvan

Reputation: 2134

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>

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

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

Upvotes: 0

mrkernelpanic
mrkernelpanic

Reputation: 4451

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>

Upvotes: 0

Related Questions