I'm experiencing difficulty with bootstrap's input groups. When the window size is larger, the 'input-group-btn' class keeps expanding in width, causing the search bar to become off-center. I've attempted setting a max width on that element, but it didn't resolve the issue. I also tried floating the elements and placing them in a row with columns, but nothing has been successful for me.
Using btn-group-justified fills up the space, but it's not exactly what I'm aiming for.
Here is a link to a code example
I can't upload images here, so you can view one by clicking this link.
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>