How to Check Twitter Bootstrap is Loaded or not ? - GeeksforGeeks

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>
<!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>
Output:
Note: The bootstrap-specified method can be anything modal, popover that you need to check it carefully.
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?