Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3: Set custom width with input-group/input-group-addon and horizontal labels

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>

HTML with 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:

lined-up input elements

This is what it looks like now:

current state

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/

like image 913
Keven Avatar asked Nov 29 '13 02:11

Keven


1 Answers

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/

like image 127
Phil Avatar answered Nov 15 '22 23:11

Phil