Bootstrap 3.3.6 and JQuery 3.1.0 not compatible?

18,509

Solution 1

Right Now Bootstrap 3.3.7 are Updated and jquery jquery-3.1.1 are well working for me. Not showing a single error in my console or anywhere. So I think you can use updated bootstrap.

Bootstrap say to set JQuery version to 1.9.0 or higher Link

Bootstrap 3.3.7 support jQuery version 3 and above

Get more information in Github Issue Link

Solution 2

Bootstrap 3 is not compatible with jQuery 3.0 and above at the moment. So latest version of jQuery that can be used with Bootstrap 3 is 2.2.4.

Although, some reported that it works with jQuery Migrate.

You can check this discussion for more info.

Update

Like MD Ashik reported, latest Bootstrap versions work well with jQuery 3+

Share:
18,509
Parthannun
Author by

Parthannun

Updated on June 12, 2022

Comments

  • Parthannun
    Parthannun almost 2 years

    Is it possible that these 2 (both are newest versions) aren't compatible? (In the snippets: The local files are the newest versions, the online retrieved files are older versions) Is there anything I can do to use both locally?

    These snippets work:

    Snippet 1:

    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    

    Snippet 2:

    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    

    This snippet doesn't work:

    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    

    I've tried them with this dropdown menu:

    <nav class="nav navbar-inverse">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Info<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="html/bussen.html">Bussen</a></li>
                    <li><a href="html/DJs.html">DJ's</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    
  • Jakob
    Jakob almost 8 years
    Version 3 is not in alpha anymore... In fact 3.1 was released recently blog.jquery.com/2016/07/07/…