How to make a toggle switch button in Bootstrap 3?-CodePudding

Here's the code I tried

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rating</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form>
        <label >
            <h3>How satisfied are you with our product?</h3>
            <input type="radio" name="optradio" checked> Excellent
            <input type="radio" name="optradio"> Good
            <input type="radio" name="optradio"> Bad
            <input type="radio" name="optradio"> Terrible
        </label>
        <label >
            <h3>Choose one or more options</h3>
            <input type="checkbox" checked> Option 1
            <input type="checkbox"> Option 2
            <input type="checkbox"> Option 3
        </label>
        <!-- Default switch -->
        <div >
            <input type="checkbox"  id="customSwitches">
            <label  for="customSwitches">Toggle this switch element</label>
        </div>
</body>
</html>

The toggle switch I tried doesn't work and just shows a checkbox. Can anyone help me with this? I can't use normal CSS and HTML because I have to use Bootstrap here. Any help is appreciated.

And here's style.css

@import url('https://fonts.googleapis.com/css2?family=Anek Latin:wght@600&family=Kanit:wght@300&family=Open Sans&family=Poppins:wght@300;500&family=Roboto Mono:wght@700&family=Smooch Sans:wght@300;900&family=Source Sans Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anek Latin:wght@600&family=Kanit:wght@300&family=Open Sans&family=PT Sans&family=Poppins:wght@300;500&family=Roboto Mono:wght@700&family=Smooch Sans:wght@300;900&family=Source Sans Pro&display=swap');

form {
    font-family: 'PT Sans', sans-serif;
    background: linear-gradient(#7F7FD5, #86A8E7, #91EAE4);
}

input {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    width: 100%;
}

CodePudding user response：

you need to include bootstrap via cdn in ur <head> tag

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div >
  <input  type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label  for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>