Bootstrap Horizontal forms labels overlapping on resize

canuckconsulting
canuckconsulting used Ask the Experts™
on
I'm creating a form with multiple sections using Bootstrap.  The end result should look similar to this:

Goal
I am having an issue where resizing the form is causing the labels and fields to collide in my horizontal form as below:

Screenshots
I've stripped down some code  to illustrate the issue:
https://jsfiddle.net/scotie/rbf8n8p2/
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Owner (Aidellio)
Most Valuable Expert 2015
Commented:
The issue is that every time you use a col- class, you must have a parent node that has the "row" class.  When you nest these columns you still need to encapsulate the columns within a row class

e.g. do not forget the bold parts below! :)

<div class="row">
<div class="col-md-6">
    <div class="row">
        <div class="col-xs-8"></div>
        <div class="col-xs-4"></div>
    </div>
</div>
<div class="col-md-6">
    <div class="row">
        <div class="col-xs-8"></div>
        <div class="col-xs-4"></div>
    </div>
</div>
</div>

Author

Commented:
Working great...thanks Rob.  I added row as a class to the from group elements and everything is perfect!

	<div class="form-group row">

Open in new window

Author

Commented:
Thanks Rob!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial