Menu
I have 2 DYNAMICALLY created bootstrap button groups. When I select a button it works. But, as soon as I select another button, in the OTHER group, it de-selects the original one. So basically I can only have ONE button selected, even though they are in different button groups. Any idea why? The button groups ids are unique.
<div class="container">
<h2>Button Group</h2>
<div class="btn-group" id="group1">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group" id="group2">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
245
Instead of applying button sizing classes to every button in a group, just add . btn-group-* to each . btn-group , including each one when nesting multiple groups.
Add the . flex-wrap class to your button group container. Show activity on this post. If, like me, you don't necessarily need the buttons to be in a group, you could also use the btn-toolbar class which defines flex-wrap: wrap by default.
Button groups allow multiple buttons to be stacked together on a single line. This is useful when you want to place items like alignment buttons together. You can add on optional JavaScript radio and checkbox style behavior with Bootstrap Button Plugin. This class is used for a basic button group.
Answer: The ButtonGroup control manages the selected/unselected state for a set of buttons. For the group, the ButtonGroup instance guarantees that only one button can be selected at a time. Generally, we use Radio Button control with a button group.
This will solve your problem.
<div class="container">
<h2>Button Group</h2>
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary">
<input type="radio" >Apple
</label>
<label for="" class="btn btn-primary">
<input type="radio" >Samsung
</label>
<label for="" class="btn btn-primary">
<input type="radio">Sony
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary">
<input type="radio" >Apple
</label>
<label for="" class="btn btn-primary">
<input type="radio" >Samsung
</label>
<label for="" class="btn btn-primary">
<input type="radio" >Sony
</label>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
