0
138
ViewsBootstrap button plugin does not seem to be applying the button plugin
G'day,
I'm trying to add an option group to my app, as per the example found here at Buttons :: Checkbox and Radio Buttons. However, when I do it, the styling does not seem to apply properly and the option group doesn't work. There is no javascript errors, and otherwise I've copy-pasted the example. I've used Bootstrap extensively so far (only styling), so I think it's a problem with the javascript.
I've created a code pen with the bare minimum of what I'm doing, and it still seems to occur, so I don't think it's anything I've doing wrong in my app (specifically). I've also included my dependencies in the <head> portion of the code pen too.
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!
1 answers
Answer question0
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.0CDN 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/bootstrap@4.0.0/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/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary active">
<input type="radio" name="radio_group" id="1" autocomplete="off" checked> Option 1
</label>
<label class="btn btn-outline-secondary">
<input type="radio" name="radio_group" id="2" autocomplete="off"> Option 2
</label>
<label class="btn btn-outline-secondary">
<input type="radio" name="radio_group" id="3" autocomplete="off"> Option 3
</label>
</div>
</body>
</html>