How to detect which Bootstrap version is used from JavaScript?

Question

I've been looking at the CSS & JavaScript from Bootstrap 3. Nothing is modularized under a common alias. For the JavaScript, it is injected into jQuery's prototype...

How would it be possible to detect which version of Bootstrap is included in a user's web page from a third party plugin/library point of view with JavaScript?

Answer 1

The version of each of Bootstrap's jQuery plugins can be accessed via the VERSION property of the plugin's constructor

$.fn.tooltip.Constructor.VERSION

Answer 2

As suggested in comments, the only function that seems to be removed in Bootstrap 3 was typehead, even then - there doesn't seem to be a reliable way of detecting which Bootstrap version the site has loaded.

var bsVersion = ( typeof $.fn.typeahead !== 'undefined' ? '2.3.2' : '3.0.0' );

Answer 3

In case you want to grab the Bootstrap's version based on its comments in CSS file, you could use the following code. It's been tested, to make sure it works.

Assume, that Bootstrap's CSS file contains a comment displaying a version (it always does actually):

/*!
 * Bootstrap v3.0.3 (http://getbootstrap.com)
 * Copyright 2013 Twitter, Inc.
 * Licensed under http://www.apache.org/licenses/LICENSE-2.0
 */

Remember about same origin policy, when using jQuery.get() method, where the request will not be successfully executed, if data-source is from a different domain, subdomain, or protocol.

$(function () {
    $.get("dist/css/bootstrap.min.css", function (data) {
        var version = data.match(/v[.\d]+[.\d]/);
        alert(version);
    });
});

Example Online

The online example above, is based on grabbing local file from jsfiddle.net but not from getbootstrap.com, because of the security reasons that were already mentioned, and extracting a comment, which should display accordingly after you hit Run button.

You could also test it just by going to getbootstrap.com, opening a console and pasting the code. After you run it, you will get the current version of Bootstrap displayed, which is v3.0.3 at the moment.

Answer 4

I share my Javascript Module :

/**
 * Created by LJT.
 */
myBootstrapUtils = function () {

    /**
     * Search bootstrap.min.js or bootstrap.js in DOM
     * @return {*}
     */
    function getBootStrapJsUrl() {
        var bootstrapUrl;
        $('script').each(function () {
            var externalJsSrc = $(this).attr('src');
            if (typeof externalJsSrc !== 'undefined') {
                if (externalJsSrc.toLowerCase().lastIndexOf('bootstrap.min.js') !== -1 || externalJsSrc.toLowerCase().lastIndexOf('bootstrap.js') !== -1) {
                    bootstrapUrl = externalJsSrc;
                    return false;
                }
            }
        });
        return bootstrapUrl;
    }

    function hasBootStrapJs() {
        return getBootStrapJsUrl() !== undefined;
    }


    /**
     * This function grab the bootstrap's version in Js File
     * @param data Data file representation
     * @return {*}
     */
    function analyseBootstrapJsFile(data) {
        var bootstrapVersion;
        var matches = data.match(/v[.\d]+[.\d]/);
        if (matches === null) {
            bootstrapVersion = 'unknown';
        } else {
            //Security Array.isArray(matches) === true ?
            bootstrapVersion = matches[0];
        }
        //console.log(bootstrapVersion);
        return bootstrapVersion;
    }


    function getBootStrapJsVersionSyncMode() {
        var version,
            bootstrapUrl = getBootStrapJsUrl();
        if (bootstrapUrl !== undefined) {
            jQuery.ajax({
                url: bootstrapUrl,
                success: function (data) {
                    version = analyseBootstrapJsFile(data);
                },
                async: false
            });
        }
        return version;
    }

    function getBootStrapJsVersionAsyncMode(defered) {
        var bootstrapUrl = getBootStrapJsUrl();
        if (bootstrapUrl !== undefined) {
            $.get(bootstrapUrl)
                .then(function (data) {
                    version = analyseBootstrapJsFile(data);
                    defered.resolve(version);
                })
                .fail(function () {
                    defered.fail();
                });
        } else {
            defered.fail();
        }
    }

    /**
     * Example for async mode usage
     */
    function exampleAsyncMode() {
        var dfd = $.Deferred();
        dfd.done(function (version) {
            console.log('My bootstrap version is : ' + version);
        });
        dfd.fail(function (version) {
            console.log('Error while request bootstrap version ...');
        });
        getBootStrapJsVersionAsyncMode(dfd);
    }

    /**
     * Easy way to get bootstrap plugin version
     * @see http://getbootstrap.com/javascript/#js-version-nums
     * @return {*}
     */
    function getBoostrapModalVersion() {
        return $.fn.modal.Constructor.VERSION;
    }

    return {
        hasBootStrapJs: hasBootStrapJs,
        getBootStrapJsVersionSyncMode: getBootStrapJsVersionSyncMode,
        getBootStrapJsVersionAsyncMode: getBootStrapJsVersionAsyncMode
    }
}();

console.log(myBootstrapUtils.hasBootStrapJs());
console.log(myBootstrapUtils.getBootStrapJsVersionSyncMode());
//myBootstrapUtils.exampleAsyncMode();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

In my scenario, I have an API that has bootstrap render mode and needs to determine the major bootstrap version. I'm facing many occurences of implementators using only the Bootstrap CSS and not the javascript. I therefore hacked together following function which, altough not perfect and clean at all, helps me detect what version of bootstrap CSS is referenced (if any)

    function getBoostrapMajorVersion() {
        try {
            return Number(window['jQuery'].fn.tooltip.Constructor.VERSION.substring(0, 1));
        } catch (e) { }

        var testElement = document.createElement('div');
        testElement.setAttribute('style', 'display:block;width:100px;height:100px;position:absolute;opacity:0.001;');
        testElement.innerHTML = '<div style="display:block;" class="w-50 h-25"></div>';
        document.body.appendChild(testElement);

        if (testElement.childNodes[0].clientHeight == 25 && testElement.childNodes[0].clientWidth == 50) {
            document.body.removeChild(testElement);
            return 4;
        }

        testElement.innerHTML = ''
        testElement.setAttribute('class', 'hidden-xs hidden-sm hidden-md hidden-lg');
        if (testElement.clientHeight == 0) {
            document.body.removeChild(testElement);
            return 3;
        }
    }