Toggle Switch CSS not apply

Topic: Toggle Switch CSS not apply

codeJr free asked 5 years ago

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: result

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>

Add comment

Tomek Makowski staff answered 5 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: desktop
Browser: chrome
OS: macos
Provided sample code: No
Provided link: Yes

codeJr

5Support score
1Questions 0Answers 0Snippets