How to make toggle button switch use boostrap 5?-CodePudding

I have a proble to make a toggle switch button, and I do not know how to do it. Here is my code that I try to do, I hope someone can help me:

<div  checked data-toggle="toggle" role="group" aria-label="Basic mixed styles example">
            <button type="button" >Month</button>
            <button type="button" >Year</button>
</div>

Toggle switch like this:

CodePudding user response：

Assumed you would be using jquery (bootstrap), Ypu can further style as you see fit

(function($) {
  'use strict';

  $(document).ready(() => {

    $("input[type='button']").click((event) => {
      $("input[type='button']").toggleClass("btn-toggle");
    });

  });

})(jQuery);

input[type='button'].btn-toggle {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div  role="group" aria-label="Basic mixed styles example">
  <input type="button"  value="Month">
  <input type="button"  value="Year">
</div>

CodePudding user response：

Bootstrap 5 uses data-bs-toggle instead of data-toggle