How to keep round corners using Bootstrap

Question

From the following image I want to hide the second button,

using javascript , and I need the first button to have round corners.

After I hide the second button using javascript, the first button has a rectangular shape on the right side:

If I remove the node button, bootstrap sets the rounded corners, but this is not useful.

This is what I need using javascript:

Standard bootstrap html button structure:

 <div class="btn-group"> <button class="btn btn-mini action_select customSelect" id="btn_bulk_action" data-toggle="button" disabled="disabled">Reply<span class="reply2"></span></button> <button class="btn btn-mini action_select" data-toggle="button" id="btn_bulk_action_archive" disabled="disabled" style=" display: none; ">Archive<i class="icon-remove"></i></button> </div> 

Answer 1

This is because your buttons are in a button group, and by default bootstrap expects more than one button.

You must either remove the button group or change the css to round the button, if there is only one.

In any case, to answer your question, the simplest way is through jquery:

 $('.btn-group').removeClass('btn-group'); 

http://jsfiddle.net/uVffe/

Although you might want to add a class again so that I:

 $('.btn-group').addClass('btn-group-single'); 

CSS

 .btn-group-single > .btn:first-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } 

Then you can delete it in the future:

 $('.btn-group').removeClass('btn-group-single'); 

http://jsfiddle.net/uVffe/1/

Switch Example:

http://jsfiddle.net/uVffe/3/