How to make a toggle switch button in Bootstrap 3?

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 class="radio-block">
            <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 class="radio-block">
            <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 class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitches">
            <label class="custom-control-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%;
}

Solution

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

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