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

user_10195610 0
Viewed 38

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.

Options with option styling showing

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!

bootstrap-5 twitter-bootstrap css html javascript
2 Answers

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:

  1. Upgrade button group html code to version 5.0 documentation.
  2. 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/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>
user_50417590

If you want to use Bootstrap 5 you shall update code by following:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

user_104931630
Related