Textarea inline with multiple rows in bootstrap

Question

I'm trying to come up with a template that looks like the following:

 Label  Input               Label   Input
 Label  Input               Label   Input
 Label  Textarea            Label   Input
        Textarea (cont.)    Label   Input

I can't seem to figure out which way to do this with bootstrap at the moment.

Here's what I currently have (on JS Fiddle):

<div class="container">
    <div class="row">
        <div class="col-sm-1">Label 1</div>
        <div class="col-sm-2">
            <input id="input1" name="input1" type="text" value="" maxlength="50"/>
        </div>
        <div class="col-sm-1">Label 2</div>
        <div class="col-sm-2">
            <input id="input2" name="input2" type="text" value="" maxlength="50"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-1">Label 3</div>
        <div class="col-sm-2">
            <input id="input3" name="input3" type="text" value="" maxlength="50"/>
        </div>
        <div class="col-sm-1">Label 4</div>
        <div class="col-sm-2">
            <input id="input4" name="input4" type="text" value="" maxlength="50"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-1">Label 5</div>
        <div class="col-sm-2">
            <textarea id="textarea" name="textarea" rows="5" cols="17"></textarea>
        </div>
        <div class="col-sm-1">Label 6</div>
        <div class="col-sm-2">
            <input id="input6" name="input6" type="text" value="" maxlength="50"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-offset-3 col-sm-1">Label 7</div>
        <div class="col-sm-2">
            <input id="input7" name="input7" type="text" value="" maxlength="50"/>
        </div>
    </div>
</div>

This produces something that looks like this:

 Label  Input               Label   Input
 Label  Input               Label   Input
 Label  Textarea            Label   Input
        Textarea (cont.)
                            Label   Input

Obviously the issue is me placing the textarea in the row, but I can't figure out where else to put it for my desired output.

Any ideas?

Solution 1

I fixed it to how I was expecting it to work, and am pretty sure this is the correct answer to the question I asked.

JS Fiddle.

<div class="container">
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-6">Label 1</div>
            <div class="col-sm-6">
                <input id="input1" name="input1" type="text" value="" maxlength="50"/>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">Label 3</div>
            <div class="col-sm-6">
                <input id="input3" name="input3" type="text" value="" maxlength="50"/>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-6">Label 2</div>
            <div class="col-sm-6">
                <input id="input2" name="input2" type="text" value="" maxlength="50"/>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">Label 4</div>
            <div class="col-sm-6">
                <input id="input4" name="input4" type="text" value="" maxlength="50"/>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-6">Label 5</div>
            <div class="col-sm-6">
                <textarea id="textarea" name="textarea" rows="5" cols="17"></textarea>    
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-6">Label 6</div>
            <div class="col-sm-6">
                <input id="input6" name="input6" type="text" value="" maxlength="50"/>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">Label 7</div>
            <div class="col-sm-6">
                <input id="input7" name="input7" type="text" value="" maxlength="50"/>
            </div>
        </div>
    </div>
</div>

Solution 2

Check out the formatting I used in this bootply.

Code:

<div class="container">
<div class="col-xs-12 col-sm-12 col-md-1">
    <div>Label</div>
    <div>Label</div>
    <div>Label</div>
</div>
  <div class="col-xs-12 col-sm-12 col-md-3">
    <input id="input1" name="input1" type="text" value="" maxlength="50">
    <input id="input2" name="input2" type="text" value="" maxlength="50">
    <textarea id="textarea" name="textarea" rows="5" cols="17"></textarea>
</div>
  <div class="col-xs-12 col-sm-12 col-md-1">
    <div>Label</div>
    <div>Label</div>
    <div>Label</div>
    <div>Label</div>
</div>
    <div class="col-xs-12 col-sm-12 col-md-3">
    <input id="input3" name="input3" type="text" value="" maxlength="50">
    <input id="input4" name="input4" type="text" value="" maxlength="50">
    <input id="input5" name="input5" type="text" value="" maxlength="50">
    <input id="input6" name="input6" type="text" value="" maxlength="50">
</div>

I broke up the labels and inputs into 4 columns, you might need some extra CSS to line the labels up a little better but this fixes your gap issue.