Bootstrap 3 Button Groups

Question

**Bootstrap 3

I'm trying to make each set of button group unique but the different groups are interfering with each other

 <label>Payment Mode</label> <div class="btn-group"> <button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button> <button type="button" class="btn btn-default">JobsBuddy Disbursement</button> </div> <label>Payment Period</label> <div class="btn-group"> <button type="button" class="btn btn-default">Immediate</button> <button type="button" class="btn btn-default"> More Than 1 day</button> </div> 

How do i keep it unique in it's own group

Answer 1

You may want to use the Bootstrap provided radio button groups ( http://getbootstrap.com/javascript/#buttons ), and then use the reset method to clear the other group..

HTML:

<label>Payment Mode</label>
  <div id="mode-group" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" name="mode" id="option1"> Cash / Cheque / Bank Transfer
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="mode" id="option2"> JobsBuddy Disbursement
    </label>
  </div>

  <label>Payment Period</label>
  <div id="period-group" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" name="period" id="period1"> Immediate
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="period" id="period2"> More Than 1 day
    </label>
  </div>

jQuery:

// unselect period when mode is selected
$("#mode-group .btn").on('click',function(){

  $("#period-group").button('reset');

});

Demo: http://bootply.com/86422

Answer 2

Click the button in the btn-group doesn't set a (active) class. The button gets a different background-color cause it is focussed (:focus). Clicking a button in a different btn-group sets the focus to this button.

Use something like this to set an active class per btn-group:

$('.btn-group button').click(function()
{
    $(this).parent().children().removeClass('active');
    $(this).addClass('active');
});

Answer 3

If you are using AngularJS the Angular UI bootstrap has a great solution.

Basically do the following using the btnRadio directive.

<div class="btn-group">
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>

Answer 4

To keep unique button just don't use class="btn-group" :

<label>Payment Mode</label>
 <div>
    <button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
    <button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
 </div>

 <label>Payment Period</label>
 <div>
      <button type="button" class="btn btn-default">Immediate</button>
     <button type="button" class="btn btn-default"> More Than 1 day</button>
 </div>

This class is used for series of buttons. Check documentation of Buttons Group

Answer 5

Just to simplify it for the next person to come looking, here's the solution code from the Bootstrap website:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Basically, you style the labels as buttons and code the options as regular radio buttons to separate one set of options from the other.