Can someone assist me in troubleshooting an issue with loading CSS files from mdbootstrap in this example:
I have imported the necessary mdbootstrap CSS and JS links along with a custom CSS file, but it doesn't seem to be working properly. Any help would be appreciated. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/css/mdb.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/Custom.css">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/js/mdb.min.js"></script>
</head>
<body>
<div class="container"><br/>
<div class="col-lg-8 m-auto d-block">
<!-- Switch -->
<div class="p-5">
<div class="switch switch-info">
<label>
Off
<input type="checkbox">
<span class="lever"></span> On
</label>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the custom CSS file:
/* Switch info */
.switch-info label input[type=checkbox]:checked+.lever {
background-color: #33b5e5;
}
.switch-info label input[type=checkbox]:checked+.lever:after {
background-color: #0099CC;
}