Created by: toooni
This fixes an issue if the default value of $btn-padding-y
or $btn-padding-x
has been changed.
When overwriting the default .btn paddings:
$btn-padding-y: .625rem;
$btn-padding-x: 1.125rem;
This simple input-group
<div class="input-group">
<input type="text" class="form-control" placeholder="Name" aria-label="Name" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="button-addon2">Button</button>
</div>
</div>
The provided fix will result in this:
This issue does only happen on the default size of .input-group
with a .btn
. There is already a solution for the sized ones: .input-group-lg
(https://github.com/twbs/bootstrap/blob/2a2b0b5abe7b44b519c9e19e8876b75608979dd0/scss/forms/_input-group.scss#L135) and .input-group-sm
(https://github.com/twbs/bootstrap/blob/2a2b0b5abe7b44b519c9e19e8876b75608979dd0/scss/forms/_input-group.scss#L154)
It seems like it was also fixed for the non sized .input-group-text
but the default size .btn
was not being thought of: https://github.com/twbs/bootstrap/blob/2a2b0b5abe7b44b519c9e19e8876b75608979dd0/scss/forms/_input-group.scss#L102