How To Build A 2 Column View In Bootstrap With Large Textarea On Top

Hi everyone, I am trying to build a view like in the added pic.I would like to build a view ( display form ) with 2 columns that looks like the attached picture. I have a 2 column

Solution 1:

Use the grid sizing classes (.span1 to .span12):

<div class="container">
    <div class="controls">
        <textarea class="span12" type="text"></textarea>
    </div>
    <div class="controls controls-row">
        <input class="span6" type="text"/>
        <input class="span6" type="text"/>
    </div>
    <div class="controls controls-row">
        <input class="span6" type="text"/>
        <input class="span6" type="text"/>
    </div>    
</div>

​DEMO.

Solution 2:

Why not make the fields into a 2 row table? Like so:

<textarea rows="2" cols="30">

</textarea>
<table border="none">
<tr>
<td><input type="text" name="field1" /></td>
<td><input type="text" name="field2" /></td>
</tr>
<tr>
<td><input type="text" name="field3" /></td>
<td><input type="text" name="field4" /></td>
</tr>
</table>