Topic: Toggle Switch CSS not apply
I am new at code and I am trying to implement this example: https://mdbootstrap.com/snippets/jquery/bartek-malanowski/517057
However, seems like the CSS files from mdboostrap are not being loaded:
I imported the mdboostrap CSS and JS links and I have a custom css file with the custom css, but it's not working... Can you help me please? Thanks
My css code:
<label class="custom-control custom-checkbox"><span>Grayscale:</span>
<input type="checkbox" id="grayscale" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
My html code:
<!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>
It seems to be free version of MDBootstrap that's why it doesn't work. This kind of switch will work properly only with MDB Pro version. Every exemple on our website have special tag which shows user there is free version or Pro.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: desktop
- Browser: chrome
- OS: macos
- Provided sample code: No
- Provided link: Yes