Is there anything similar to Foundation's prefix form labels in Twitter Bootstrap?

Question

I started to use Foundation 5 for my web project, but it seems full of bugs, and the form validation just simply doesn't work. So I switched to Bootstrap.

However, there was a feature in Foundation called Pre/Postfix Labels & Actions (see here) and I want it in Bootstrap.

I have searched and searched but cannot find anything even remotely similar. I can use the glyphicon, glyphicon glyphicon-gbp, to show the "£" sign before my form input, however I am unable to get it to flow correctly using the grid system.

I have a JS Fiddle here: http://jsfiddle.net/kAnjN/

This is my HTML:

<div class="container">
<form class="form-horizontal">
    <div class="form-group">
        <label for="monthly_rent" class="col-sm-2 control-label">Monthly Rent</label>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-gbp"></span>
            <input type="text" name="monthly_rent" class="form-control">
        </div>
    </div>
</form>

Does anyone have any advice? I am a PHP developer and front-end things like this frustrate me! Bootstrap and Foundation are supposed to make it easier and just "work" but I always have to search for hours for solutions to tiny problems.

I basically want to achieve what is on the Foundation link above.

Answer 1

Use the .input-group class:

<label for="monthly_rent" class="col-sm-2 control-label">Monthly Rent</label>
<div class="col-sm-4">
<div class="input-group">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-gbp"></span>
    </span>
        <input type="text" name="monthly_rent" class="form-control">
</div>
</div>

Example