Skip to content
GitLab

Set .btn padding for default sized input-group

Closed Administrator requested to merge github/fork/toooni/patch-1 into main

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>

Will result in the following: image

The provided fix will result in this: image

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