Bootstrap 3 multi input-group-addon style behavior

Question

I am using bootstrap3 and I would like to use multiple inputs-group-addon together. If I try to do so, unfortunately I get in some elements a 2px border instead of 1px.

Bootply

What kind of CSS style I could use to solve my problem? Thanks

Answer 1

This is a common known problem in bootstrap, you can overcome this problem by overriding '.inputs-group-addon' class.

bootply

Example

.input-group-addon:first-child + .input-group-addon:last-child {
    border-left: 1px solid #ccc;
}

.input-group-addon:not(:first-child):not(:last-child) + .input-group-addon:not(:first-child):not(:last-child) {
    border-left: 0;
}

.form-control + .input-group-addon:not(:first-child):not(:last-child) {
    border-left: 0;
}

.input-group-addon:not(:first-child):not(:last-child) + .form-control {
    border-left: 0;
}

Also there is an issue in bootstrap.

Answer 2

Add following CSS:

.input-group-addon{
     border-left: 0;
}

This will work. See this.