The Bootstrap button plugin appears to be malfunctioning and not applying its intended styling

Hello there,

I've been trying to implement an option group in my application, following the example provided at Buttons :: Checkbox and Radio Buttons. However, I've encountered an issue where the styling does not seem to be applied correctly and the option group fails to work as expected. While I have made sure there are no JavaScript errors and have essentially copied the example code, it seems like there might be an issue with the JavaScript functionality.

To showcase this problem, I've set up a CodePen with the essential components of my implementation. Even on this simplified platform, the issue persists, leading me to believe that there isn't anything inherently wrong with how I integrated it into my app specifically. Additionally, I have included all the necessary dependencies in the <head> section of the CodePen as well.

https://i.sstatic.net/xu2ad.png

According to my interpretation of the documentation, I shouldn't be seeing the radio buttons, and the state of the active button should change accordingly.

Thank you for your help in advance!

javascripthtmlcsstwitter-bootstrapbootstrap-5

Answer №1

Trust your instincts when you mention

After reviewing the documentation, it seems that the radio buttons should not be displayed and the active button should change accordingly.

However, the code snippet you are utilizing (Buttons :: Checkbox and Radio Buttons) is from Bootstrap version 4.0, whereas the Bootstrap CDN included in the <head> section pertains to bootstrap version 5.0.

There are two possible solutions:

  1. Update the button group HTML code to version 5.0 using this documentation.
  2. Include the version 4.0 CDN within the <head> tags.

By choosing option 2 and incorporating the correct CDN, your code will function as expected:

<html>

<head>
  <!-- New CDN link for Bootstrap 4.0 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101756f716f71">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxnDduMIWvTNh0E263XmFcJlSAwiGgFAW/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151253f213f21">[email protected]</a>/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>

Answer №2

To implement Bootstrap 5, you need to make the following code updates:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d362a3628357a7d6c7929">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accec3c3d8dfd8decddcec99829e829c81cec9d8cd9d">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Failure to load image logo when refreshing the page

There's something peculiar happening in my App.vue. Imagine I have a route link, let's say it's localhost/tools or any similar route. The logo image will display on this route. Take a look at the image here https://i.stack.imgur.com/6HaXI.p ...

javascriptvue.jstemplates

What is preventing my counter from functioning when I click on the canvas?

I am attempting to increment the count every time a bouncing ball in the browser is clicked using this.setState({count: this.state.count + 1});. I thought my code was correct since I have done similar tasks before without using canvas, but it's not fu ...

javascripthtmlreactjsdebuggingcanvas

Converting between GPS degrees and decimal values using jquery, javascript, and PHP: A comprehensive guide

Is there a way to convert GPS degree to decimal values or vice versa? I am working on developing a feature where users can input an address and retrieve the GPS values in both degree and/or decimal format. However, my main challenge is understanding how t ...

javascriptjquerygps

How can you replace a public method in a specific class in Javascript?

I have a JavaScript class that I need to test: TestClass = function { // some code that utilizes initializeRequest this.initializeRequest = function() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); ...

javascriptajaxunit-testingoverridingjsunit

What is the best way to remove a CSS style using JavaScript?

For my website automation using Selenium, I encountered a challenging dropdown that was not the standard native one but a custom-designed version. To tackle this issue, I needed to set its CSS class to hidden in order to access the native functionality smo ...

javascriptjquerycssseleniumselenium-webdriver

Click on the link to open in a new tab and redirect the current window to a different website

Currently, my form action is set to "_blank" in order for the pdf document I am generating to open in a new tab/window. While this works correctly, I am looking to also have the original page redirect to a different URL simultaneously. Are there any ways ...

javascripthtmlhttp-redirect

Enhancing a Stripe customer object with additional metadata

While setting up a payment system using Stripe, I encountered an issue when trying to add metadata to the customer object. Specifically, I wanted to include my workspace id in the metadata property of the customer. However, upon executing the code below, I ...

javascriptnode.jsstripe-payments

Verify if the currentRoute begins with a specific text pattern (such as something/something/*...) in Angular

I need to prevent a loader from appearing on certain screens, so I used ngIf on routes where the loader is not necessary. Here's the code snippet from app.component.ts : <router-outlet> <app-spinner></app-spinner> <ngx-ui-load ...

javascriptangularangularjsangular-ng-if

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

I am currently struggling with overlaying a white box on top of my background image in order to have my text inside the box for a more visually appealing look. Despite trying to add CSS code like this: .white-box { position: absolute; background-c ...

htmlcss

I am getting a HTTP 405 error indicating that the method is not allowed, and it appears to

In my Javascript program, I requested this URL using the library epson-2.6.0.js, which is the Epson SDK for JavaScript specifically designed for thermal printers. My target device is a TM U220 connected via ethernet. GET XHR http://192.168.199.15:8008/soc ...

javascriptajaxprintingcors

Protractor: Decrease the magnification

Currently, I am working with protractor and facing the challenge of zooming out to 50%. Despite trying numerous solutions found on StackOverflow, none have successfully resolved the issue. Some attempted solutions include: browser.actions().keyDown(protra ...

javascriptseleniumprotractor

Incorporate a generic type into a React Functional Component

I have developed the following component: import { FC } from "react"; export interface Option<T> { value: T; label: string; } interface TestComponentProps { name: string; options: Option<string>[]; value: string; onChang ...

javascriptreactjstypescript

Finding the Middle Point of a Circle Using CEP/JavaScript

Using a specific set of calculations, I am able to create a circle in this manner: var yMinCir = height - 1515.80/2.667+8.5; var yMaxCir = height - 1545.80/2.667+8.5; var myCircle = page.ovals.add({geometricBounds:[yMinCir, 1312.63/2.667+8.5, yMaxCir, 1342 ...

javascriptadobe-indesignextendscriptadobe-extension

Learn how to retrieve the ID of an element with a simple click using PHP, jQuery, AJAX, and Javascript

Apologies for being a newbie in this field, but I'm eager to learn. Any assistance would be greatly appreciated. In my project, there is a sidebar with rss links that I want to incorporate ajax functionality into. So, whenever a user clicks on a link ...

javascriptphpjqueryhtmlrss

Error in Express.js App: Attempting to access properties of an undefined object (specifically 'transfer-encoding')

Currently, I am developing a blogging app API using express and MongoDB. In my project, I want to include an image for each blog post. However, as someone who is new to express, I encountered a specific issue that has been puzzling me. The error message ...

javascriptmongodbexpress

Waiting for JavaScript/Vue/Angular to finish loading using Selenium in Java

I am currently developing an automation tool for a website using Selenium in Java. To enhance the real automation process, I heavily rely on JavaScript with JavascriptExecutor. While things usually run smoothly, there are occasional crashes (around 1 out o ...

javascriptjavaseleniumdomwebdriver

Convert traditional class-based styles to inline styles

Is there a tool available that can efficiently convert class-based styles to inline styles? I am designing an email and find it much easier and quicker to work with classes, but the final output requires inline styles. It seems like there should be softwar ...

javascriptjqueryhtmlcss

In search of the precise locator for conducting Selenium tests

During my project work, I've encountered the challenge of finding the correct locator for Selenium testing. Despite trying various combinations, I can't seem to locate the right one to click on a specific link. Every attempt results in a "No Such ...

javahtmlselenium

Triggering hovers inside one div by hovering over another div

Currently stuck on a project and unable to find a solution after trying various approaches. Here is the link to the task at hand... The objective is to make all inner divs animate simultaneously when the outer div is rolled over. Additionally, clicking on ...

javascriptjqueryhtmlcss

The Android webview fails to load the page, but the app successfully loads it when accessed through the

I'm experiencing an issue with my HTML5 mobile web app loading fine in a browser but getting stuck on an Android webview. We have implemented a splash screen before loading the web app, but the webview seems to be stuck on the splash screen and does n ...

androidhtmlwebviewwurfl