Question

I want to make a budget template using Twitter Bootstrap. The output should have a row label, two inline inputs, a totals output, two more inline inputs and a final totals output. The idea is that each row would be one category, and the pair of inputs would be quantities and rates that, when multiplied, yield a total. It would resemble the following:

Category_1     Input_1    Input_2   Total=Input_1*Input_2       Input_3    Input_4    Total=Input_3*Input_4

I’m having trouble putting all of this on one row using the class systems described in bootstrap. I can get two inputs on the same line, but I don’t know how to combine it with a non_input span in the middle followed by the last two inputs. How might I do this?

Update:

I’ve gone through a few iterations to try this. This is only the latest failed attempt:

<div class="controls controls-row">
    <label class="control-label">Category 1</label>
    <input class="span1" type="text" placeholder="Input 1">
    <input class="span1" type="text" placeholder="Input 2">
    <label class="control-label">Total 1</label>
    <input class="span1" type="text" placeholder="Input 3">
    <input class="span1" type="text" placeholder="Input 4">
    <label class="control-label">Total 2</label>
</div>

Answer 1

<form class="form-inline">
    <span>Category 1</span>
    <input type="text" class="input-small" placeholder="Input 1">
    <input type="text" class="input-small" placeholder="Input 2">
    <span>Total 1</span>
    <input type="text" class="input-small" placeholder="Input 3">
    <input type="text" class="input-small" placeholder="Input 4">
    <span>Total 2</span>
</form>​

Here’s fiddle. Now you only nave to tweak spacing.

Also pay attention to the HTML elements you are using, label should be associated with a control.