CODEWITHSUNDEEP
csstwitter-bootstrap
Gus
Gus

Reputation: 953

Bootstrap 3 multi input-group-addon style behavior

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. enter image description here

Bootply

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

Upvotes: 3

Views: 1484

Answers (2)

Malindu
Malindu

Reputation: 135

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.

Upvotes: 3

Rahul Singh
Rahul Singh

Reputation: 892

Add following CSS:

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

This will work. See this.

Upvotes: 2

Related Questions