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

I have the following Bootstrap 3 button group:

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>

I hide the first button using:


The result is that the first visible button doesn’t have corner radius:

I guess the BS says: first child of .btn-group has border-radius instead of first visible child of .btn-group has border-radius

Is there any way to fix this?


Note that I don’t want to remove the button but to hide it.


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")


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)