Bootstrap input-group-btn has extra width that makes things off-center

1
votes

I am having trouble with bootstraps input groups. At larger window sizes, the class 'input-group-btn' continues to grow in width making the search bar offcenter. I've tried setting a max width on that element but that didnt work. I've also tried floating the elements, and putting them in a row with columns but nothing has worked for me.

Using btn-group-justified, fills that space, but isn't really what I'm looking for.

Link to code example

I can't post images but here is a link to one.

html,
body {
  height: 100%;
  background-color: #666699;
}
.well {
  background-color: #ffffee
}
#content {
  padding: 25% 25% 5%;
}
.search-form {
  border-radius: 30px 0 0 30px;
}
.input-group {
  width: 100%;
}
span.input-group-btn {
  max-width: 38px;
}
#search {
  border: 1px;
}
.search-btn {
  cursor: pointer;
  border-radius: 0 30px 30px 0;
  background-color: #fff;
  color: #669;
}
.text-center {
  color: #fff;
}
<body>
  <div class="container">
    <div id="content">
      <form class='form-inline'>
        <div class="input-group">
          <input type='text' id='search' class="form-control search-form" placeholder="Scooby Doo">
          <span class="input-group-btn">
              <button id="search-this"type="button" class="btn btn-default search-btn">
                  <i class="fa fa-search"></i>
              </button>
            </span>
        </div>
      </form>

      <p class="text-center">Some centered text</p>


    </div>
  </div>
</body>
1
twitter-bootstrapcssbuttontwitter-bootstrap-3
Looks centered to me - Adam Buchanan Smith
@AdamBuchananSmith what size screen are you looking at it on? On mine it is centered at <768px but greater than that the width of the span element jumps from 38px to 66px - Ken Myers

1 Answers

0
votes

I fixed it! Heres what I did:

  • Set the inline style on span to width:39px
  • Added the 'pull-right' class to the button