Menu
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!
673
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:
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 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>
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
