input width and button width with bootstrap

Question

I have a form with an input and a button, styled with bootstrap. I am using grid colums to give the input and the button their own width.

But it seems to change the input's width, I have to assign the col-* class to the div surrounding the input, whereas the button can receive the class on itself.

This ends up with the input not using the width I was hoping to give it.

<div class="container">
    <div class="row">
      <form name="search" role="search">
        <div class="form-group col-sm-10 col-xs-12">
            <input type="text" class="form-control input-lg" placeholder="Hey"/>
        </div>
        <div class="form-group">
          <button class="btn btn-primary btn-lg col-sm-2 col-xs-12" type="submit">
            Search
          </button>
        </div>
      </form>
    </div>
</div>

Here is a jsfiddle where I added a line on the page as a reference to show up to where the input should go on the left. As you make the fiddle window smaller, the button goes under the input and reaches a full lenght, but the input still has a gap on both sides.

Answer 1

It is because the column classes are meant to wrap the elements and give them structure. If you give your button those classes, it will give that element the full width instead of the typical padding.

I moved the column classes onto the form-group instead and made a simple class called .btn-full that sets the width: 100%; and it achieves what you want.

http://jsfiddle.net/SXus5/

Answer 2

If you want the button to be the full width of the container, just add the class 'btn-block' to it. Any inputs inside of a form group will automatically expand to fill their container. Instead of adding the .col classes to the form group, add it to a div the form is contained in.

Here's a modified version of your jsfiddle with the input, button and line all the same width.

<button type="submit" class="btn btn-primary btn-lg btn-block">Search</button>