CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
user3404390
user3404390

Reputation: 97

Bootstrap Button group act independently

I have a button bar on my web page made with bootstrap.

I have a set of 3 buttons then two. The first three need to be independent. ie I can select one, two or three of them. The second set of two work as required that if one is selected the other is not.

The functionality on the first three do not work and I am not sure why. They are in seperate button groups with different id's

Any ideas? Here is the code: 

<div class="row" style="margin-top: -4px;">
<div class="col-xs-9" style="padding-right: 0px;">
    <div class="col-xs-4" style="padding: 0px;">
        <div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">Open now</button>
              </div>
        </div>
    </div>
    <div class="col-xs-4" style="padding: 0px;">
        <div id="freeOnlyBtn" class="btn-group btn-group-justified" role="group" aria-label="2">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">Free only</button>
              </div>
        </div>
    </div>
    <div class="col-xs-4" style="padding: 0px;">
        <div id="18PlusBtn" class="btn-group btn-group-justified" role="group" aria-label="3">

              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">18+</button>
              </div>
         </div>      
    </div>
</div>
<div class="col-xs-3" style="padding-left: 0px;">
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-info"><i class="fa fa-th" style="padding-top: 3px; padding-bottom: 3px;"></i></button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-info"><i class="fa fa-list" style="padding-top: 3px; padding-bottom: 3px;"></i></button>
      </div>
    </div>
</div>

Upvotes: 0

Views: 1199

Answers (2)

Elias Gikonyo
Elias Gikonyo

Reputation: 5409

how about this, replace your display text on the buttons with a check box like this:

From:

<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">Open now</button>
              </div>
        </div>

To:

<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1"  data-toggle="buttons">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-primary">
        <input type="checkbox" autocomplete="off" checked>Display Text
    </button>
      </div>
</div>

Worked for me!

Upvotes: 0

Frondor
Frondor

Reputation: 3466

You can do that using: check boxes for multiple, and radio inputs for single.

<div class="container-fluid">
    <div class="col-xs-9">
        <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="checkbox" autocomplete="off" checked>Open now</label>
            <label class="btn btn-primary">
                <input type="checkbox" autocomplete="off">Free only</label>
            <label class="btn btn-primary">
                <input type="checkbox" autocomplete="off">+18</label>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-success">
                <input type="radio" name="options" id="option2" autocomplete="off">On</label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option3" autocomplete="off">Off</label>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions