how to design a two column form using bootstrap 2.3.2 where the 2nd column takes up the rest space

Question

I would like to design a two column horizontal form using Bootstrap V2.3.2. The following is the html:

<div id='content' class='row-fluid'>
<div class='span12 main'>
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
    <label for="inputAppName" class="control-label col-xs-2">Application Name&nbsp;  </label>
<div class="col-xs-10">
<input type="text" class="form-control" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;"></div>
<div class="form-group">
<label for="inputAppDesc" class="control-label col-xs-2">Description&nbsp;</label>
<div class="col-xs-10">
<textarea class="form-control" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>

I find that the width of the input-text and textarea on the second column are smaller. I would like to extend them to take up the rest space. I tried to use the "input-block-level" class but the input-text and textarea will then not be on the same row as the label.

Can anyone help?

Thanks in advance!

Answer 1

The first thing to do is to don't use the Bootstrap 3 class...

Try Bootstrap 2 instead... Replace col-xx-[1-12] by span[1-12]

Your code with input in span11 :

http://www.bootply.com/119374

<div id="content" class="row-fluid">
    <div class="span12 main">
        <h2>Product Data</h2>
      <form class="form-horizontal">
        <fieldset>
          <div class="form-group row-fluid">
            <label for="inputAppName" class="control-label span2">Application Name&nbsp;  </label>
            <div class="span10">
              <input type="text" class="form-control span11" id="app_name" name="app_name" placeholder="Application Name">
            </div>
          </div>
          <div style="height:10px;">
          </div>
          <div class="form-group row-fluid">
            <label for="inputAppDesc" class="control-label span2">Description&nbsp;</label>
            <div class="span10">
              <textarea class="form-control span11" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
</div>

Answer 2

try this

<form>

    <div class="row">

        <div class="col-xs-6">

          <div class="input-group">

            <span class="input-group-addon">

              <input type="checkbox">

            </span>

            <input type="text" class="form-control">

          </div>

        </div>

        <div class="col-xs-6">

          <div class="input-group">

            <span class="input-group-addon">

              <input type="radio">

            </span>

            <input type="text" class="form-control">

          </div>

        </div>

      </div>

</form>