Input groups button bigger than input in Bootstrap 3 using Jumbotron container - html

Question

Here is my code for the form:
<div class="container-full">
<div class="jumbotron text-center" style="background-color:transparent; margin:auto">
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
<span class="input-group-addon">
<button id="filter" class="btn btn-primary btn-block" onclick="submitForm();" style="background-color:#6e5cbf; color: #ffffff">
>
</button></span>
</div>
</form>
</div>
The problem I have is when I add a button to the button group, it is bigger than the input box:
How can I stop this from happening? Thanks

Answer 1

You could do it by changing the button to a span with role=button on the parent and switching a few styles around, like so
<div class="container-full">
<div class="jumbotron text-center" style="background-color:transparent; margin:auto">
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
<span class="input-group-addon" style="background-color:#6e5cbf;" role="button">
<span id="filter" onclick="submitForm();" style="color: #ffffff">
>
</span>
</span>
</div>
</form>
</div>
</div>
While the bootstrap documentation doesn't say anything about buttons, it does say
We do not support multiple form-controls in a single input group.
Looking at the styling of buttons vs. form-controls I'd assume that the restriction extends to buttons as well.
It's going to look like this (image)

Answer 2

Try to add form-group for these input and button element.
something like
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
</div>
<div class="form-group">
<span class="input-group-addon">
<button id="filter" class="btn btn-primary btn-block" onclick="submitForm();" style="background-color:#6e5cbf; color: #ffffff"></button>
</span>
</div>
</div>
</form>
It will differentiate those two blocks and you can write cutom classes on top of that

Answer 3

Your button has class .btn which has following style:
.btn{
display: inline-block;
padding: 6px 12px; //this is what making it to extend space
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143; //and this too
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
So the work-around will be override those properties. Add a class say 'special' to the button and override following attributes:
.special{
padding:0px !important;
line-height:1
}
DEMO

Answer 4

Why is everyone making it complicated? Just put this and y'all will be fine.
This:
<input class="btn btn-outline-primary form-control-sm" type="button" Value="Send" />
instead of:
<button class="btn btn-outline-primary form-control-sm">Send</button>
Boom. We done.