0

Hi I am using Bootstrap 3 and while I faced the problem of sizing up my user inputs I took help from this question shadowf answer helped me.

Now I am into another problem. The fix does size the inputs but is applies the same for the label and the control inside the form-group as the class is applied at that level.

I need to apply different sizing for the label and the input box. If I apply the sizing class at the label or the input level the form alignment goes for a toss.

I don't want to use a horizontal or inline form.

<div class="form-group col-xs-6"> 
<label for="exampleInputEmail1">Really long label which I want to have separate sizing</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

modified fiddle here

Community
  • 1
  • 1
Ananda
  • 888
  • 9
  • 19

1 Answers1

2

Seems like you need to split the lines between the text-label and the input box. Then you can make the text follow the whole 12 grid system while the input only uses 6 blocks in the system:

<div class="form-group">
  <div class="row">
    <div class="col-xs-12">
      <label for="exampleInputEmail1">Really long label which I want to have separate sizing</label>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
  </div>
</div>

JSFiddle. I haven't done anything to the password-field, but you get the point. Good luck!

NiklasMH
  • 697
  • 6
  • 16