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%;
}

0
X 5 أشهر 2022-07-10T12:01:24+03:00 0 إجابة 3 مشاهدات مبتدئ 0

‫أضف إجابة

تصفح
تصفح

مجهول يجيب