Bootstrap 3: Input group in navbar form takes up entire width

Question

So this is what bootstrap\'s navbar form looks like.

The default HTML is:

Answer 1

Edit: I didn't notice OP asked for a solution without manually setting width in css. Still, I think this is a good alternative if you don't mind the max-width. And it only sets the max-width for the high resolutions, so you keep the normal behavior on tablet and mobile.

1) Add navbar-searchbox on div.input-group:

<form class="navbar-form navbar-left" role="search">
  <div class="input-group navbar-searchbox">
    <input type="text" class="form-control">
    <div class="input-group-btn">
      <button type="submit" class="btn btn-default">Search</button>
    </div>
  </div>
</form>

2) Put this in your .lass file.

@media (min-width: @screen-sm-min) {
  .navbar-searchbox {
    max-width: 250px;
  }
}

3) Jump around the room shouting victory!

No need use rows, and yes that is all the CSS you need. Just works, try it.

Answer 2

The fact that your solution takes up the entire width is a good thing. Now use nested rows and columns to define how much space you actually want that search bar to consume.

<div class="row">
    <div class="col-md-3">
        <form class="navbar-form navbar-left" role="search">
         <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for awesome stuff">
            <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
          </div>
        </form>
    </div>
</div>

Answer 3

I prefer to treat the form element as normal, and just fixed its apperance using this CSS rule:

.navbar-form .input-group {
    display: inline-block;
    width: auto;
    vertical-align: middle;

    .form-control,
    .input-group-btn {
        float: left;
    }
}

Answer 4

I thought of a minimal way to fix this without modifying the default structure of the navbar form used in the Bootstrap documentation.

Add class navbar-input-group to the form

<form class="navbar-form navbar-left navbar-input-group" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>

CSS (place in media query if necessary):

.navbar-input-group {
  font-size: 0px; /*removes whitespace between button and input*/
}

.navbar-input-group input {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.navbar-input-group .btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px;
}

or SCSS (keeps responsiveness intact):

@import "bootstrap-variables";

.navbar-input-group {
  @media (min-width: $screen-sm) {
    font-size: 0px; /*removes whitespace between button and input*/

    input {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    .btn {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-left: 0px;
    }
  }
  @media (max-width: $screen-xs-max) {
    margin-top:0px;
    margin-bottom:0px;

    .btn {
      width:100%;
    }
  }
}

Result:

For purposes of clarity, I am targeting descendant elements in the CSS. This is not the most efficient way to target CSS elements. If you like this answer, consider giving the input and button unique class names and targeting them without any descendant selectors in your CSS (read: http://csswizardry.com/2011/09/writing-efficient-css-selectors/)