bootstrap radio buttons not displaying correctly-CodePudding

I am using the bootstrap doc's

This is the code in the example:

<div  role="group" aria-label="Basic radio toggle button group">
  <input type="radio"  name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label  for="btnradio1">Radio 1</label>

  <input type="radio"  name="btnradio" id="btnradio2" autocomplete="off">
  <label  for="btnradio2">Radio 2</label>

  <input type="radio"  name="btnradio" id="btnradio3" autocomplete="off">
  <label  for="btnradio3">Radio 3</label>
</div>

See the fiddle here.

Any ideas on how to get these to work properly?

CodePudding user response：

You've probably mistaken the version of the bootstrap and you have linked it wrongly.

Here you have works example with bootstrap@5:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    
<div  role="group" aria-label="Basic radio toggle button group">
  <input type="radio"  name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label  for="btnradio1">Radio 1</label>

  <input type="radio"  name="btnradio" id="btnradio2" autocomplete="off">
  <label  for="btnradio2">Radio 2</label>

  <input type="radio"  name="btnradio" id="btnradio3" autocomplete="off">
  <label  for="btnradio3">Radio 3</label>
</div>


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>


  </body>
</html>