Click here to Skip to main content
14,882,311 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am creating two button groups. whenever I click a button from second button group, already selected button from 1st group is getting deselected. I am able to select only one button both group. I want to select one button from each group. This is the code & I use :focus (css) for button. I need to use button type for bootsrap (btn-primary).This is my HTML code & CSS please help me.

HTML
<div class="row">
  <div class="column" style="width:30%">
    <div class="btn-group" >
      <button type="button" class="btn btn-primary" style="outline-color:red; " @onclick="() => UpdateTheChart(11)">@Language.T35</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(12)">@Language.T36</button>
      <button type="button" class="btn btn-primary" btn btn-primary" @onclick="() => UpdateTheChart(13)">@Language.T37</button>
    </div>
  </div>
  <div class="column" style="width:70%">
    <div class="btn-group" >
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(21)">@Language.T138</button>
      <button type="button" class="btn btn-primary"@onclick="() => UpdateTheChart(22)">@Language.T38</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(23)">@Language.T39</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(24)">@Language.T40</button>
    </div>
  </div>
</div>
CSS
.show {
  display          : block;
  }
.btn-group {
  margin-top       : 20px;
  overflow         : hidden;
  }
.btn {
  font-weight      : bold;
  color            : white;
  border           : none;
  outline          : none;
  padding          : 12px 16px;
  /*blue*/
  background-color : #2c75ff;
  cursor           : pointer;
  }
.btn:hover {
  font-weight      : bold;
  color            : white;
  /*green*/
  background-color : #85c995;
  }
.btn:focus {
  /*green*/
  background-color : #85c995;
  color            : white;
  }


What I have tried:

I have tried the label radio & Javascript doesnt work.
Posted
Updated 10-Mar-21 21:50pm
v2

1 solution

Only one element can be focussed at a time. If you actually want to select an option from each group, you need to use radio buttons:
Buttons · Bootstrap v4.6[^]
   
Comments
Aqilah Hannani 12-Mar-21 1:35am
   
I try the radio button, looks ok but didi'nt work( change color)
Richard Deeming 12-Mar-21 3:09am
   
The samples on the Bootstrap site change colour when an option is selected.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900