Bootstrap complex form layout for combined vertical/inline fields

Question

I'm very new to Bootstrap but growing fast in my skill and also appreciation for it. I have a need to build a fairly complex page that will contain a lot of form elements, including multiple address fill-in components. I've attached here an image of the basic design that I am aiming for, and can't seem to achieve it with the basic form design elements available to me. I feel like my approach is getting "out of control" in the sense that I've got too many nesting levels and not enough understanding of what I'm actually doing. So rather than post the code I've got so far, can anyone give me a simplified example of how my design might be achieved?

My dotted-line rectangles represent the fact that my page should have a two-column display, with most of the form elements off to the wider RH side. And then, within that column, my form has some additional levels of complexity. There are many additional form elements that I'm not even showing here, and that's my main reason for wanting to design it this way--because I need to save on vertical screen real estate as much as possible.

Thanks for your help.

Answer 1

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

A simple sample from me. Hope this will help 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

Certain types of forms are complicated with and without Bootstrap. There is no complete out of the box solution for your form. You would combine Bootstrap with custom CSS and use nesting. The "easiest" way is to do each chunk, indent, comment and so forth. Be very detail oriented.

This is an example of the more annoying section of the form image you have, which is three nested columns inside the second column. I adjust all my forms that are similar to this to use percentage gutters inside the nested .form-group (which acts like a .row) as the 30px gutter for this is too big. 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 -->