8

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/

neuquen
  • 3,991
  • 15
  • 58
  • 78
  • Only `.form-control` and `.input-group-addon` elements should go inside `.input-group` containers. Use `.form-group` to group your labels and `.input-group` elements – Phil Nov 29 '13 at 03:38
  • How's this - http://jsfiddle.net/jfXUr/1/ ? – Phil Nov 29 '13 at 03:46

1 Answers1

18

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/

Phil
  • 157,677
  • 23
  • 242
  • 245
  • Thanks Phil. What you did looks fine, but I'd really like the labels to show beside the input elements. Is that possible? – neuquen Nov 29 '13 at 03:57
  • @Keven For that, you should be using [`.form-horizontal`](http://getbootstrap.com/css/#forms-horizontal). You'll need to add the `col-` classes to your labels and `.input-group` elements for sizing – Phil Nov 29 '13 at 03:59
  • I'm already using `.form-horizontal` in my form element. So it should work if I put the `.input-group` class on my labels? Any way you could do a fiddle to show me what you mean? – neuquen Nov 29 '13 at 04:01
  • 1
    @Keven Ah, your fiddle didn't have form-horizontal. Here's a horizontal example - http://jsfiddle.net/jfXUr/3/. Note the `col-` classes on the labels and input groups. I've used `xs` columns so it work in JSFiddle's tiny windows – Phil Nov 29 '13 at 04:03
  • Thanks Phil!! You're awesome. It worked. I did notice the `xs`. I will change that to fit my needs. Have a good one! – neuquen Nov 29 '13 at 04:17