How to mix vertical and horizontal form elements in one form in Bootstrap 3?

Question

I am trying to create a form that mixes horizontal and vertical elements. I have managed to do it and it looks nice: http://www.bootply.com/rOibTngOct (you can see the result on bootply but I'll put the code here also)

<div class="col-md-4 col-md-offset-4">
  <form role="form">
    <div class="form-group">
      <label for="name">Name</label>
      <input class="form-control" type="text">
    </div>
  </form>
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label class="col-xs-9 control-label">Choice that you prefer</label>
      <div class="col-xs-3">
        <select class="form-control select">
          <option>A</option>
          <option>B</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="col-xs-5 control-label">Another choice</label>
      <div class="col-xs-7">
        <select class="form-control select">
          <option>very long choice C</option>
          <option>very long choice D</option>
        </select>
      </div>
    </div>
  </form>
  <form role="form">
    <div class="form-group">
      <label for="name">Address</label>
      <input class="form-control" type="text">
    </div>
  </form>
</div>

But as you can see I am resorting to 3 different forms! I need to have only one form (to submit it through AJAX to the server)

I need help! I tried this: http://www.bootply.com/pCCodAQaKN

<div class="col-md-4 col-md-offset-4">
  <form role="form">
    <div class="form-group">
      <label for="name">Name</label>
      <input class="form-control" type="text">
    </div>
    <div class="form-group">
      <label class="col-xs-9 control-label">Choice that you prefer</label>
      <div class="col-xs-3">
        <select class="form-control select">
          <option>A</option>
          <option>B</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="col-xs-5 control-label">Another choice</label>
      <div class="col-xs-7">
        <select class="form-control select">
          <option>very long choice C</option>
          <option>very long choice D</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="name">Address</label>
      <input class="form-control" type="text">
    </div>
  </form>
</div>

And it looks awfull. So my questions are:

• Is there a way to do this with standard bootstrap 3?
• If not how to do it with custom classes? (I honestly tried 2 different solutions but with no avail)
• Or, is it possible to send through AJAX several forms at the same time?

Answer 1

You don't have to use form-horizontal -class on a <form> element. Instead use a <div> and wrap all of the fields inside one <form> like this: http://www.bootply.com/hxs0IhA1wV