Search code examples
twitter-bootstrapjquery-steps

Bootstrap fields on same line

Does anyone know why my "termination Date" field is not going on the same line as Date Hired? When I am following the same rules as all the fields above?

<h1>Employee</h1>
<fieldset>
    <h2>Employee Information</h2>
    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label>Name</label>
                <input id="name" name="name" type="text" class="form-control required">
            </div>
            <div class="form-group">
                <label>Date</label>
                <input id="todaysDate" name="todaysDate" type="text" class="form-control required">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label>Job Title</label>
                <input id="title" name="title" type="text" class="form-control required email">
            </div>
            <div class="form-group">
                <label>Department</label>
                <input id="department" name="department" type="text" class="form-control">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label>Date Hired</label>
                <input id="hiredDate" name="hiredDate" type="text" class="form-control required email">
            </div>
            <div class="form-group">
                <label>Termination Date</label>
                <input id="termDate" name="termDate" type="text" class="form-control">
            </div>
        </div>
    </div>
</fieldset>

enter image description here

Solution

  • You're structure is wrong, in order to accomplish what you want your code should be:

    <h1>Employee</h1>
<fieldset>
    <h2>Employee Information</h2>
    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label>Name</label>
                <input id="name" name="name" type="text" class="form-control required">
            </div>
            <div class="form-group">
                <label>Date</label>
                <input id="todaysDate" name="todaysDate" type="text" class="form-control required">
            </div>
            <div class="form-group">
                <label>Date Hired</label>
                <input id="hiredDate" name="hiredDate" type="text" class="form-control required email">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label>Job Title</label>
                <input id="title" name="title" type="text" class="form-control required email">
            </div>
            <div class="form-group">
                <label>Department</label>
                <input id="department" name="department" type="text" class="form-control">
            </div>
            <div class="form-group">
                <label>Termination Date</label>
                <input id="termDate" name="termDate" type="text" class="form-control">
            </div>
        </div>
    </div>
</fieldset>

    in this way you have 1 row with 2 columns (3 inputs per column), so when collapsed the first column elements will be displayed before the second column ones (so left elements before right ones).

    But if when collapsed you need to show the top elements before the bottom ones, you may want to do something like:

    <h1>Employee</h1>
<fieldset>
    <h2>Employee Information</h2>

    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label>Name</label>
                <input id="name" name="name" type="text" class="form-control required">
            </div>
            <div class="form-group">
                <label>Job Title</label>
                <input id="title" name="title" type="text" class="form-control required email">
            </div>
        </div>
        <div class="col-lg-6">

        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label>Date</label>
                <input id="todaysDate" name="todaysDate" type="text" class="form-control required">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label>Department</label>
                <input id="department" name="department" type="text" class="form-control">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label>Date Hired</label>
                <input id="hiredDate" name="hiredDate" type="text" class="form-control required email">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label>Termination Date</label>
                <input id="termDate" name="termDate" type="text" class="form-control">
            </div>
        </div>
    </div>

</fieldset>

    And you will have 3 rows with 2 columns each (1 input per column).