Bootstrap 3: Set custom width with input-group/input-group-addon and horizontal labels
css, forms, html, twitter-bootstrap, twitter-bootstrap-3
Solution
As per my comment above, try grouping the label and `.input-group` together with a `.form-group` container.
<div class="form-group">
<label for="" class="control-label">Paycheck</label>
<div class="input-group input-group-lg">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
</div>
Demo here - http://jsfiddle.net/jfXUr/1/
Problem
I would like to control the size of my input elements using the class `.col-lg-*` outlined here on the bootstrap website. However, putting the `<span>` element inside of a div completely messes it up: HTML with div: ``` <div class="input-group input-group-lg"> <label for="" class="control-label">Paycheck</label> <div class="col-lg-10"> <span class="input-group-addon">$</span> <input type="text" class="form-control" id=""> </div> </div> ``` How can I set the width of the input elements so that they are all the same? I want the left margin of each input element to be flush like so: This is what it looks like now: This is my current HTML: ``` <div class="col-md-6"> <div class="content"> <h2>Income</h2> <form class="form-income form-horizontal" role="form"> <div class="input-group input-group-lg"> <label for="" class="control-label">Paycheck</label> <span class="input-group-addon">$</span> <input type="text" class="form-control" id=""> </div> <div class="input-group input-group-lg"> <label for="" class="control-label">Investments</label> <span class="input-group-addon">$</span> <input type="text" class="form-control" id=""> </div> <div class="input-group input-group-lg"> <label for="" class="control-label">Other</label> <span class="input-group-addon">$</span> <input type="text" class="form-control" id=""> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">Update</button> </form> </div> ``` LIVE EXAMPLE: http://jsfiddle.net/jfXUr/