Making certain form fields inline with label

Question

By default all of my input fields are 100% in width. For one of my form fields I need the label to be inline with the input field. The rest of them can all be stacked. I tried the following but it is still pushing the input field down below its label:

<div class="form-inline">
    <div class="form-group">
        <asp:Label ID="fieldLabel1" runat="server" Text="Field label 1" AssociatedControlID="ntxtFieldLabel1"></asp:Label>
        <telerik:RadNumericTextBox ID="ntxtFieldLabel1" runat="server" Width="100%" CssClass="form-control"></telerik:RadNumericTextBox>
    </div>                                                    
</div>

Mivaweb · Accepted Answer · 2015-05-26 13:41:33Z

1

You can use the col-*-* class tags in order to set the amount of cols you want.

For example you set the label for 2 columns using the class col-md-2. For input elements, the best practice will be using a parent div container. Then on this parent you set the amount of columns using the class col-md-10.

<div class="form-horizontal">
   <div class="form-group">
      <label class="control-label col-md-2" for="BrandId">Merk</label>
      <div class="col-md-10">
          <input type="text" class="form-control"></input>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-md-2" for="BrandId">Merk</label>
      <div class="col-md-10">
          <input type="text" class="form-control"></input>
      </div>
    </div>
</div>

See my fiddle with an example:

http://jsfiddle.net/VDesign/0vp9aL61/

edited May 26, 2015 at 13:41

answered May 26, 2015 at 13:30

Mivaweb

5,7523 gold badges30 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Making certain form fields inline with label

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related