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

gota

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?
Henri Hietala

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Bootstrap Horizontal Form not vertical

From Dev

Group horizontal form elements vertical

From Dev

Bootstrap 5 horizontal and vertical center on form

From Dev

How to align inline radios / checkboxes and help-block elements in horizontal form with Twitter's Bootstrap 3

From Dev

Bootstrap 3 - Form horizontal not working

From Dev

Bootstrap 3 horizontal form spacing

From Dev

Bootstrap 3 vertical form with one inline row of inputs

From Dev

Bootstrap 3 vertical form with one inline row of inputs

From Dev

Create bootstrap form having horizontal and vertical form field

From Dev

Order of bootstrap horizontal form elements mixed up?

From Dev

Create vertical form elements inside an inline form in Bootstrap 3.3.6

From Dev

How to avoid parsley.js to move form elements from horizontal to vertical?

From Dev

aligning form elements bootstrap 3

From Dev

Bootstrap 3 Form elements alignment

From Dev

Bootstrap 3 Form elements alignment

From Dev

Bootstrap form-horizontal vertical alignment of checkboxes without label text

From Dev

Bootstrap, align input with label to button without label, vertical form / not horizontal

From Dev

Twitter Bootstrap 3 inline and horizontal form

From Dev

Bootstrap 3 form-horizontal not working with bootstrapWizard

From Dev

Centering input element into horizontal form Bootstrap 3

From Java

Inline Form nested within Horizontal Form in Bootstrap 3

From Dev

Bootstrap horizontal form

From Dev

Bootstrap Horizontal alignment form

From Dev

How gaps are made between form elements in bootstrap3?

From Dev

Inline form elements within non-inline form in Bootstrap 3?

From Dev

How to center form in bootstrap 3

From Dev

How do i show date of birth input fields in a vertical form in bootstrap 3?

From Dev

How can I show a label with select2 in bootstrap 3 form-horizontal mode?

From Dev

How set image to center (vertical and horizontal) Bootstrap3

Related Related

  1. 1

    Bootstrap Horizontal Form not vertical

  2. 2

    Group horizontal form elements vertical

  3. 3

    Bootstrap 5 horizontal and vertical center on form

  4. 4

    How to align inline radios / checkboxes and help-block elements in horizontal form with Twitter's Bootstrap 3

  5. 5

    Bootstrap 3 - Form horizontal not working

  6. 6

    Bootstrap 3 horizontal form spacing

  7. 7

    Bootstrap 3 vertical form with one inline row of inputs

  8. 8

    Bootstrap 3 vertical form with one inline row of inputs

  9. 9

    Create bootstrap form having horizontal and vertical form field

  10. 10

    Order of bootstrap horizontal form elements mixed up?

  11. 11

    Create vertical form elements inside an inline form in Bootstrap 3.3.6

  12. 12

    How to avoid parsley.js to move form elements from horizontal to vertical?

  13. 13

    aligning form elements bootstrap 3

  14. 14

    Bootstrap 3 Form elements alignment

  15. 15

    Bootstrap 3 Form elements alignment

  16. 16

    Bootstrap form-horizontal vertical alignment of checkboxes without label text

  17. 17

    Bootstrap, align input with label to button without label, vertical form / not horizontal

  18. 18

    Twitter Bootstrap 3 inline and horizontal form

  19. 19

    Bootstrap 3 form-horizontal not working with bootstrapWizard

  20. 20

    Centering input element into horizontal form Bootstrap 3

  21. 21

    Inline Form nested within Horizontal Form in Bootstrap 3

  22. 22

    Bootstrap horizontal form

  23. 23

    Bootstrap Horizontal alignment form

  24. 24

    How gaps are made between form elements in bootstrap3?

  25. 25

    Inline form elements within non-inline form in Bootstrap 3?

  26. 26

    How to center form in bootstrap 3

  27. 27

    How do i show date of birth input fields in a vertical form in bootstrap 3?

  28. 28

    How can I show a label with select2 in bootstrap 3 form-horizontal mode?

  29. 29

    How set image to center (vertical and horizontal) Bootstrap3

HotTag

Archive