How to Check Twitter Bootstrap is Loaded or not ?

Last Updated : 19 Feb, 2020

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:

<!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= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 
    </script> 
  
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
    </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> 