How to right align labels and input Twitter bootstrap?

Question

I am using Twitter bootstrap 3 and would like to right-align the following form to look like this fiddler http://jsfiddle.net/WX58z/8/

<form class="form-horizontal">
   <div class="block" >
      <label class="cinfo">Card Type </label>
      <select ng-model="cardtype" ng-change="selectCardType(cardtype)" ng-options="c.type for c in card" class="ng-pristine ng-valid"></select>
   </div>
   <div class="block">
      <label class="cinfo" >Card Number</label>
      <input id="cardnumber" ng-model="MarvPayer.cardnumber"/>
   </div>
   <div class="block">
      <label class="cinfo">First Name </label> <input id="fname" ng-model="MarvPayer.fname"/>
   </div>
</form>

score 2 · Accepted Answer · edited May 23 '17 at 11:59

You would make the elements inline-block and then give the input/select elements a width of something like 70%. The label elements should fill the remaining space, therefore give them a width of 30%. Add an optional padding-right value to the label element and align it to the right.

EXAMPLE HERE

.form-horizontal input, .form-horizontal select {
    display:inline-block;
    width:70%;
    padding-right:10px;
}
.form-horizontal label {
    display:inline-block;
    text-align:right;
    width:30%;
    padding-right:12px;
}

Unlike floating elements, it's worth noting that inline element respect the white-space in the markup. You would need to remove this to ensure that the calculations add up to 100%. See this answer.

Alternatively, instead of using custom CSS, you could also take advantage of some bootstrap classes..

Here is an example using the HTML you provided:

FULL SCREEN EXAMPLE HERE

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="cinfo cinfo col-sm-2 control-label">Card Type </label>
      <div class="col-sm-6">
         <select ng-model="cardtype" ng-change="selectCardType(cardtype)" ng-options="c.type for c in card" class="ng-pristine ng-valid form-control"></select>
      </div>
   </div>
   <div class="form-group">
      <label class="cinfocinfo col-sm-2 control-label" >Card Number</label>
      <div class="col-sm-6">
         <input id="cardnumber" class="form-control" ng-model="MarvPayer.cardnumber"/>
      </div>
   </div>
   <div class="form-group">
      <label class="cinfo col-sm-2 control-label">First Name </label>
      <div class="col-sm-6">
         <input id="fname" class="form-control" ng-model="MarvPayer.fname"/>
      </div>
   </div>
</form>

How to right align labels and input Twitter bootstrap?

1 Answers1