Bootstrap 3 button group: corner radius disappears after a button is hidden

Question

I have the following Bootstrap 3 button group:

  Left
         


        
      

Answer 1

Given that you are already using jQuery, you could use the following to add a class to the first/last visible button elements.

$(".btn-group button:visible")
    .first()
    .addClass('radius-left')
    .end()
    .last()
    .addClass('radius-right');

EXAMPLE HERE

You would then need to add the following styling:

.btn-group > .btn.btn-default.radius-left {
    border-top-left-radius: 4px!important;
    border-bottom-left-radius: 4px!important;
}
.btn-group > .btn.btn-default.radius-right {
    border-top-right-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
}

Unfortunately, !important is necessary to overwrite the default Bootstrap styling.

---

As an alternative, you could remove the first button element completely and then add it back in when necessary.. $("button:eq(0)").remove(); -- (example)