Row spanning in Bootstrap Grid design - html

Question

I am using the Grid layout in Bootstrap.
How do I make a particular control(say text area) span for 3 rows in this grid design?
Is it possible with Grid layout?

Answer 1

You essentially want to use a nested grid or a form group.
First, split the page into two columns, the left with more than one row and the right with only one row. In the provided example, I demonstrate how you could use a form group in the left column to get the labels/inputs exactly as in your diagram.
<div class="row">
<!-- Left Column -->
<div class="col-sm-6">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label">Input 1</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Input 2</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Input 3</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
<!-- Right Column -->
<div class="col-sm-6">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
See this working Plnkr example
Note that the plnkr needs to be wide enough to not apply the responsive layout and stack
If instead you wanted to use a nested grid to get the same effect, you would just define a new grid with rows/columns inside the left column.

Answer 2

I did not test this, but try something like this:
<div class="row">
<div class="col-md-9">
<div class="col-md-12">.col-md-12</div>
<div class="col-md-12">.col-md-12</div>
<div class="col-md-12">.col-md-12</div>
</div>
<div class="col-md-3">.col-md-3</div>
</div>
This uses the nested columns, like #user3711852 suggested.