How to Check Twitter Bootstrap is Loaded or not ?

Bootstrap is a very useful framework, which is offered by Twitter to make fully responsive websites. It provides CSS classes that are predefined and are usually meant to be directly used without any changes to it. To load Bootstrap into your website read this article Introduction and Installation.

It is very important to understand why we need to check the Bootstrap has loaded through CDN or not. If sometime in the future there is some issue with CDN, then by implementing this facility, your website will be able to fall back to a local version of Bootstrap. There are many advantages of having CDN like caching content which improves website performance, so it should not be completely removed from your website. To check whether the Bootstrap has loaded we will be using jQuery and modals (this is provided by Bootstrap). Before starting it is important to understand modals. Modals are elements that can overlay over the document. A dialogue box is an example of modals. When a modal element is activated, the rest of the window is inactive. We can check Bootstrap-specific method is available or not.

Syntax:

var bootstrap = (typeof $()."Bootstrap-specific method" == 'function');

Example: In this example we will check for the bootstrap-modal. If bootstrap has loaded then modal will be defined. If modal is undefined then we will successfully fall back to a local version of bootstrap. This example will illustrate the use of jQuery and modals to verify whether bootstrap has loaded or not.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
            Check twitter Bootstrap is loaded or not
        </title>
        <meta charset="utf-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <style>
            .disabled {
                pointer-events: auto !important;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1 class="text-success">GeeksforGeeks</h1>
            <b>A Computer Science Portal for Geeks</b>
        </center>
        <script>
        if (!$.fn.modal) {
            alert('CDN Bootstrap is not working');
            
            // Replace your_path with path where
            // local bootstrap is stored
            document.write('<script src=
    "Your_path_locall_one/bootstrap.min.js"></scr+ipt>');
            document.write('<link href=
    "Your_path_locall_one/bootstrap.min.css" rel="stylesheet">')
        } else {
            alert('CDN Bootstrap is loaded');
        }
        </script>
    </body>
      
      
    </html>

    chevron_right

    
    

  • Output:

Note: The bootstrap-specified method can be anything modal, popover that you need to check it carefully.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.