CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Michelle
Michelle

Reputation: 2712

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

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

The default HTML is:

<form class="navbar-form navbar-left" 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>

But I want to join the input and button together like an input-group. However, when I try to wrap the input and button around an input-group, it ends up occupying the entire width:

enter image description here

HTML:

<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>

I've read some solutions for this, but I want to avoid using hacks like style: "width: 200px;"

Any solutions? Thanks so much in advance.

Upvotes: 28

Views: 39311

Answers (4)

user2847643
user2847643

Reputation: 2935

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. 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>
  1. Put this in your .lass file.
@media (min-width: @screen-sm-min) {
  .navbar-searchbox {
     max-width: 250px;
  }
}
  1. Jump around the room shouting victory!

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

Upvotes: 3

Tim
Tim

Reputation: 3038

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;
  }
}

Upvotes: 0

Michelle
Michelle

Reputation: 2712

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:

enter image description here

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/)

Upvotes: 22

James Lai
James Lai

Reputation: 2071

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>

Upvotes: 13

Related Questions