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?

Mythopoeia

Give your controls' IDs, then add the values to the AJAX call, rather than trying to use forms. – Unconcern

Would love to know Why I was downvoted! This question has a clear answer (look at Henri's),I put all the source code needed, and I did a lot of research before posting it here! – Mythopoeia

People are quick to down vote. – Unconcern

Looks like this is a potential duplicate though it's unclear which version of Bootstrap was in the previous question. I went ahead an answered that one for Bootstrap 3 putting the sample code in the answer. #13596753 – Berate

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

Foxing

Since you were so fast I can only accept your answer in 5 minutes! Thank you! – Mythopoeia