How to check if Twitter bootstrap is loaded?

Question

How can I check whether there is a bootstrap.js file loaded on a page (the bootstrap.js file itself may be compiled/minified into another, bigger JS file)?

Aron · Accepted Answer · 2018-03-22T20:06:06.040

136

All you need to do is simply check if a Bootstrap-specific method is available. I'll use modal in this example (works for Bootstrap 2-4):

// Will be true if bootstrap is loaded, false otherwise
var bootstrap_enabled = (typeof $().modal == 'function');

It is not 100% reliable obviously since a modal function can be provided by a different plugin, but nonetheless it will do the job...

You can also check for Bootstrap 3-4 more specifically (works as of 3.1+):

// Will be true if Bootstrap 3-4 is loaded, false if Bootstrap 2 or no Bootstrap
var bootstrap_enabled = (typeof $().emulateTransitionEnd == 'function');

Note that all of these checks require that jQuery is already loaded.

edited Mar 22 '18 at 20:06

answered Feb 08 '13 at 08:42

Aron

3,419
3
30
42

thanks! very handy for loading bootstrap from cdnjs with a local fallback – ptim Jun 22 '14 at 09:45
1

You should use something besides `.modal`.....False positives all over the place with that example. – dhaupin Mar 03 '15 at 19:35
Yes false positives are possible, this is true. Unfortunately most possible checks are fairly genericly named in Bootstrap, so it's difficult to avoid this problem, but perhaps a more obscure one is scrollspy.noConflict. So checking that both scrollspy and noConflict exist could be less prone to false positives. You could also combine several different checks to make it even more reliable. – Aron Mar 04 '15 at 14:29
But keep in mind also that you can custom-build Bootstrap to exclude certain elements, so sticking to commonly used ones (like modal) has its advantages as well. – Aron Mar 04 '15 at 14:34
1

Should work for the most part, but be weary of packages that include jQuery plugins with identical names. – Adam Fowler Dec 18 '15 at 18:27
2

@aron I tried to use this var bootstrap_enabled = (typeof $().modal == 'function'); How to use it without jquery ? My jquery is not loaded at the time of checking bootstrap so it is giving me $ undefined error. – iit2011081 Jun 10 '17 at 06:37
@user3542450 in case jquery is not yet loaded then bootstrap is necessarily also not yet loaded (at least not properly) since jquery is a dependency of bootstrap js. if you want to also check jquery see https://stackoverflow.com/questions/7341865/checking-if-jquery-is-loaded-using-javascript – Aron Jun 14 '17 at 12:07
really! anything could have add .modal function. In fact now iv seen this Ill make everything I can add fn.modal whether I need to or not, just to break this very gray test for everyone until something better is provided. Is there any truly bootstrap specific member? – ekerner Oct 05 '18 at 11:40

score 29 · Answer 2 · answered Mar 04 '14 at 19:56

29

I would rather check for specific bootstrap plugin since modal or tooltip are very common, so

if(typeof($.fn.popover) != 'undefined'){
 // your stuff here
}

or

 if (typeof $.fn.popover == 'function') { 
   // your stuff here
  }

works in both bootstrap versions

answered Mar 04 '14 at 19:56

Benn

4,840
8
65
106

I think this is the best answer and in line with current JavaScript-thinking of being concerned with feature-support rather than looking for whole frameworks. – Phil Dec 30 '15 at 22:32

score 6 · Answer 3 · answered Dec 18 '12 at 12:38

6

if (typeof([?])=='undefined') { /*bootstrap is not loaded */}

where [?] would be any object or namespace which is defined inside the JS file itself.

The concept of "including" doesn't exist in javascript.

answered Dec 18 '12 at 12:38

Alex

23,004
4
39
73

7

For example `if(typeof($.fn.modal) === 'undefined')` – Offirmo Mar 20 '13 at 14:32

score 5 · Answer 4 · answered Jul 24 '13 at 11:34

See https://github.com/netdna/bootstrap-cdn/issues/111#issuecomment-14467221

<script type="text/javascript">
    // <![CDATA[
    (function($){

        function verifyStyle(selector) {//http://stackoverflow.com/a/983817/579646
            var rules;
            var haveRule = false;

            if (typeof document.styleSheets != "undefined") {   //is this supported
                var cssSheets = document.styleSheets;

                outerloop:
                for (var i = 0; i < cssSheets.length; i++) {

                     //using IE or FireFox/Standards Compliant
                    rules =  (typeof cssSheets[i].cssRules != "undefined") ? cssSheets[i].cssRules : cssSheets[i].rules;

                     for (var j = 0; j < rules.length; j++) {
                         if (rules[j].selectorText == selector) {
                                 haveRule = true;
                                break outerloop;
                         }
                    }//innerloop

                }//outer loop
            }//endif

            return haveRule;
        }//eof

        <!-- BOOTSTRAP JS WITH LOCAL FALLBACK-->
        if(typeof($.fn.modal) === 'undefined') {document.write('<script src="<?=$path_js?>/bootstrap.min.js"><\/script>')}

        <!-- BOOTSTRAP CDN FALLBACK CSS-->
        $(document).ready(function() {

            if( verifyStyle('form-inline') )
            {
                $("head").prepend("<link rel='stylesheet' href='<?=$path_css?>bootstrap.min.css' type='text/css' media='screen'>");
            }
            else
            {
                //alert('bootstrap already loaded');
            }
        });
    })(jQuery);
    // ]]>
    </script>

compatible with jQuery safe mode,

css check might need tweaks if you use custom css

score 4 · Answer 5 · edited Jun 20 '20 at 09:12

4

AFAIK, Short answer is

It is not possible to detect whether twitter bootstrap is loaded

Details

Twitter bootstrap is essentially css and set of js plugins to jquery. The plugin names are generic like $.fn.button and set of plugins to use are also customizable. Presence of plugin just by name would not help ascertaining that bootstrap is present.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 18 '12 at 12:52

closure

7,412
1
23
23

score 2 · Answer 6 · answered Dec 18 '12 at 12:38

You can retrieve <script> elements and check their src attribute but as you pointed out, what you are looking for is the code itself and not a file name as the code may be in any file.

The best way to detect if a JavaScript service/class/etc. is loaded in a page, is to look for something in the DOM that you know is loaded by the given JS.

E.g. to detect if jQuery is loaded, you can do null !== window.jQuery or to find out the version of the loaded jQuery, jQuery.prototype.jquery

Amplifier · Answer 7 · 2017-08-30T03:25:10.203

0

I find this the easiest way of doing it. As far as css i am not sure there is a simple way of doing that.

<script>typeof Alert !== 'undefined' || document.write('<script src="/js/bootstrap/bootstrap.min.js">\x3C/script>')</script>

edited Aug 30 '17 at 03:25

answered Aug 11 '17 at 20:56

Amplifier

143
1
1
11

score 0 · Answer 8 · answered Sep 07 '19 at 20:37

0

Add the bootstrap link and notice the change in h1 tag.

answered Sep 07 '19 at 20:37

Md Pervez Nawaz

37
7

score -4 · Answer 9 · edited Jun 24 '17 at 21:11

-4

If you type this in the console, it will output the jQuery version: console.log(jQuery().jquery);

edited Jun 24 '17 at 21:11

chopper

6,649
7
36
53

answered Jun 23 '17 at 17:42

Colette

27
4

How to check if Twitter bootstrap is loaded?

9 Answers9

Details

Linked