How can I make certain form fields inline using Bootstrap

Question

I have a form with a few fields that need to be inline. Bootstrap is not letting me do this, it renders the form fields on a entire line. Also, I would like the labels to be next to the field.

Is it feasible to wrap a subset of fields in a form tag that is set to form-inline, and how do I get the form fields not to break on their own lines. Here is what I am trying to achieve:

Here is what I've tried:

<div class="form-group">
    Zipcode <input type="text" data-bind="value: Zipcode" class="form-control"> 
    Response Time <input type="text" data-bind="value: ResponseNumber" class="form-control"> <select data-bind="options: ResponseUnits" />
</div>'

Also, I have not wrapped the form in <form> because I am using <form> to wrap a file dropzone. I am using knockout and ajax, so I don't need to use forms (unless they are required for bootstrap).

There is no CSS and my superiors don't like me to use CSS unless I have a very good reason. — Musical Shore
– Musical Shore, Commented Dec 4, 2015 at 17:45

Bryan Dellinger · Accepted Answer · 2015-12-04 17:44:55Z

2

looks like from your example you are more after a horizontal style form. use form groups.

https://jsfiddle.net/whxf78zw/1/

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Zipcode:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="zipcode" placeholder="Enter zip">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="responseTime">Response Time:</label>
    <div class="col-sm-3"> 
      <input type="number" class="form-control" id="responseTime" placeholder="Enter response time">
    </div>
   <div class="col-sm-3"> 
        <select class="form-control">
            <option>Hours</option>
            <option>Days</option>
            <option>Weeks</option>
            <option>Months</option>
            <option>Years</option>
          </select>

      </div>
    </div>

</form>

answered Dec 4, 2015 at 17:44

Bryan Dellinger

5,43210 gold badges40 silver badges90 bronze badges

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

6 Comments

isherwood Over a year ago

Note that everything renders block unless the screen is wide enough to hit the small breakpoint.

isherwood Over a year ago

(I'd probably change your column classes to col-xs-*.)

Musical Shore Over a year ago

Thanks for the answer. I have an element in the form that uses dropzonejs, and it requires the element to be wrapped in a form tag. So, if I do it this way I will have a nested form element, which I understand to be bad. I see I can replace the form element in your example with a div tag, but is that kosher?

Bryan Dellinger Over a year ago

yep you can do that, (change form to div) I do that a lot when I'm making .net aspx pages because the whole thing is in a form tag.

Musical Shore Over a year ago

How can I control the indentation of the labels? They are too far to the right.

|

Collectives™ on Stack Overflow

How can I make certain form fields inline using Bootstrap

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related