Bootstrap button plugin does not seem to be applying the button plugin-CodePudding

G'day,

I'm trying to add an option group to my app, as per the example found here at

Based on my understanding of the documentation, I shouldn't see the radio buttons and the active button should change as well.

Thanks in advance!

CodePudding user response：

Your intuition is right when you say

Based on my understanding of the documentation, I shouldn't see the radio buttons and the active button should change as well.

However, the code you are using (Buttons :: Checkbox and Radio Buttons) belongs to Bootstrap version 4.0 and the Bootstrap CDN that you are including in <head> belongs to bootstrap version 5.0.

So there are two solutions:

Upgrade button group html code to version 5.0 documentation.
Insert version 4.0 CDN in <head>.

Using option 2, your code works perfectly:

<html>

<head>
  <!-- new CDN for bootstrap 4.0 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
  
</head>

<body>
  <div  data-toggle="buttons">
    <label >
      <input type="radio" name="radio_group" id="1" autocomplete="off" checked> Option 1
    </label>
    <label >
      <input type="radio" name="radio_group" id="2" autocomplete="off"> Option 2
    </label>
    <label >
      <input type="radio" name="radio_group" id="3" autocomplete="off"> Option 3
    </label>
  </div>
  
</body>

</html>