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

Question

I am trying to create a shape that mixes horizontal and vertical elements. I managed to do this, and it looks beautiful: http://www.bootply.com/rOibTngOct (you can see the result at boot, but I will also add the code here)

<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 resort to three different forms! I need to have only one form (send it via 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 awful. So my questions are:

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

Answer 1

You do not need to use the form-horizontal class for the <form> element. Instead, use a <div> and wrap all the fields inside one <form> as follows: http://www.bootply.com/hxs0IhA1wV