Bootstrap Layout Layout for Combined Vertical / Inline Fields

Question

I am very new to Bootstrap, but developing rapidly in my skills, and also appreciate it. I need to create a rather complex page that will contain many form elements, including several components for filling in addresses. I have attached here an image of the basic design that I was aiming for, and it seems I can’t achieve this with the basic form elements available to me. I feel that my approach is “out of control” in the sense that I have too many levels of nesting and not enough understanding of what I'm actually doing. So instead of posting the code that I have, can someone give me a simplified example of how my project can be achieved?

My dashed rectangles represent that my page should have a two-column display, with most form elements facing the wider side of RH. And then, in this column, my form has some additional difficulty levels. There are many additional form elements that I don’t even show here, and that my main reason is to want to design it in this way - because I need to save as much as possible on the vertical screen of the property.

Thanks for your help.

Answer 1

You should use http://getbootstrap.com/css/#grid .

A simple sample from me. Hope this helps you understand the concept.

<div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-3"> Left side for labes </div> <div class="col-md-9"> Right side for forms <div class="row"> <div class="col-md-12"> longer forms </div> </div> <div class="row"> <div class="col-md-3"> shorter forms </div> <div class="col-md-3"> shorter forms </div> <div class="col-md-3"> shorter forms </div> <div class="col-md-3"> shorter forms </div> </div> </div> </div> </div> <div class="col-md-4"> Right panel with instructions </div> </div> 

Answer 2

Some types of forms are complex with and without Bootstrap. There is no complete turnkey solution for your form. You would combine Bootstrap with custom CSS and use nesting. The “easiest” way is to make each fragment, indent, comment, etc. Be very detailed.

This is an example of the more annoying section of the form image that you have, these are three nested columns in the second column. I set up all my forms that look like this to use percentage gutters inside a nested .form-group (which acts like a .row), since the 30px gutters are too big for that. Understanding the grid system, not just using it, will help you get more out of Bootstrap.

DEMO: https://jsbin.com/sejemi

CSS

 /* ---- text-align right the .control-label until 699px MAX width -----*/ @media (max-width:767px) { .form-custom .control-label { text-align: right } } @media (max-width:699px) { .form-custom .control-label { width: 100%; text-align: left; } .form-custom .payment-inputs { width: 100% } .form-custom .submit-form { margin-left: 0 } } /* ----------- adjusted nested columns grid and gutters ----------- */ .form-custom .form-group [class*="col-"] .form-group [class*="col-"] { padding-left: 1%; padding-right: 1%; } .form-custom .form-group [class*="col-"] .form-group { margin-left: -1%; margin-right: -1%; } .form-custom .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 5px } @media (min-width:768px) { .form-custom .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 0 } } 

HTML

 <div class="container"> <form class="form-horizontal form-custom"> <!-- BEGIN form-group line-1 --> <div class="form-group"> <label class="col-sm-4 control-label">Words Go Here</label> <div class="col-sm-8"> <div class="input-group"> <span class="input-group-addon" id="sizing-addon2">Line 1</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2"> </div> </div> <!-- /.col-sm-8 --> </div> <!-- /.form-group --> <!-- END form-group line-1 --> <!-- BEGIN form-group city-state-zip --> <div class="form-group"> <div class="col-sm-8 col-sm-offset-4"> <div class="form-group"> <!-- acts as .row --> <div class="col-sm-5"> <div class="input-group"> <span class="input-group-addon" id="sizing-addon2">City</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2"> </div> <!-- /.input-group --> </div> <!-- /.col-sm-5 (nested) --> <div class="col-sm-3"> <div class="input-group"> <span class="input-group-addon" id="sizing-addon2">State</span> <input type="text" class="form-control" placeholder="State" aria-describedby="sizing-addon2"> </div> <!-- /.input-group --> </div> <!-- /.col-sm-3 (nested) --> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon" id="sizing-addon2">Zip</span> <input type="text" class="form-control" placeholder="Zip" aria-describedby="sizing-addon2"> </div> <!-- /.input-group --> </div> <!-- /.col-sm-4 (nested) --> </div> <!-- /.form-group (nested) --> </div> <!-- /.col-sm-8 .col-sm-offset-4 --> </div> <!-- /.form-group --> <!-- END form-group city-state-zip --> <div class="form-group"> <div class="col-sm-offset-4 col-sm-8"> <button type="submit" class="btn btn-default">Button</button> </div> <!-- /col-sm-offset-4.col-sm-8 --> </div> <!-- /.form-group --> </form> </div> <!-- /.container --> 

Answer 3

you should look into the horizontal bootstrap forms: http://getbootstrap.com/css/#forms-horizontal

heres demo of what you are looking for using horizontal bootstrap forms: http://jsfiddle.net/swm53ran/31/ (this demo also shows responsive bootstrap capabilities)

Essentially, you want to combine a bootstrap grid system with horizontal bootstrap shapes.

 <div class="col-xs-8"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"/> </div> </div> </form> </div> <div class="col-xs-4"> Some other Elements and Instruction Goes Here </div> 

hope this helps!

Answer 4

If you want to combine vertical and inline groups, try the following hope:

 <div class="row"> <div class="col-sm-6"> <form class="form-horizontal" role="form" method="POST"> <div class="form-group"> <label for="line1" class="col-sm-2 control-label">Location Address</label> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Line 1</span> <input type="text" class="form-control" aria-describedby="basic-addon1" name='line1'> </div> </div> <div class="form-group"> <div class="input-group col-sm-10 col-sm-offset-2"> <span class="input-group-addon" id="basic-addon1">Line 2</span> <input type="text" class="form-control" aria-describedby="basic-addon1"> </div> </div> <div class="form-group"> <div class="input-group col-sm-10 col-sm-offset-2"> <span class="input-group-addon" id="basic-addon1">PO Box</span> <input type="text" class="form-control" aria-describedby="basic-addon1"> </div> </div> <div class="row"> <div class="col-sm-5 col-sm-offset-2"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">City</span> <input type="text" class="form-control" aria-describedby="basic-addon1"> </div> </div> <div class="col-sm-2"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">State</span> <input type="text" class="form-control" aria-describedby="basic-addon1"> </div> </div> <div class="col-sm-3"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Zip</span> <input type="text" class="form-control" aria-describedby="basic-addon1"> </div> </div> </div> </form> </div> <div class="col-sm-6">Here is the second column</div> </div> 

You can see the result here http://jsfiddle.net/a2Lech1u/3/