Horizontal form with bootstrap 3

Question

I am trying to create a fluid one-row form with text boxes, with each textbox having its corresponding label on top of it. Just like a table with a header and only one data-row, something roughly like this (but hopefully prettier...): http://jsfiddle.net/52VtD/5553/

The form should preferably be fluid, so that the text boxes resize as needed (but the labels should always stay on top of their respective textbox).

Here is one unsuccessful attempt: http://jsfiddle.net/fJ7Hb/3/

<form class="form-horizontal">
    <div class="row">
        <label class="col-sm-1">Item #</label>
        <div class="col-sm-2"><input type="text" class="form-control" /></div>
        <label class="col-sm-1">Description</label>
        <div class="col-sm-2"><input type="text" class="form-control" /></div>
        <label class="col-sm-1">Qty</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
        <label class="col-sm-1">Price</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
        <label class="col-sm-1">Total</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
    </div>
</form>

Help would be appreciated.

Answer 1

You can wrap each of your columns in a div tag and then work with some css elements to set display and where you want each item.

Here's the fiddle : http://jsfiddle.net/fJ7Hb/6/

HTML

<div class="row">
    <div>
        <label class="col-sm-1">Item #</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
    </div>
    <div>
        <label class="col-sm-1">Description</label>
        <div class="col-sm-2"><input type="text" class="form-control" /></div>
    </div>
    <div>
        <label class="col-sm-1">Qty</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
    </div>
    <div>
        <label class="col-sm-1">Price</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
    </div>
    <div>
        <label class="col-sm-1">Total</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
    </div>
</div>

CSS

.row {
    width: 1100px;
}

.row > div {
    display: inline-block;
}