Is it advisable to solely rely on CDN for incorporating Bootstrap JS components, or are there any potential drawbacks to

I'm in the process of customizing Bootstrap using my own styles, by utilizing a local version of the source SASS files as outlined in the official documentation, and importing them into a custom.scss file.

My main focus is on altering the visual aspects rather than the functionality; things like colors, typography, and the configurable "Sass options".

In this particular situation, I'm curious if there are any drawbacks or potential issues with importing the JavaScript portion of Bootstrap (specifically bootstrap.bundle.min.js) into my project via a CDN instead of keeping it local.

EDIT: Just to clarify, my question is not about the differences between loading resources from a CDN versus locally, but rather if mixing CDN and local sources for different parts of Bootstrap could cause any problems or unexpected behavior.

I realize this may be a basic question, and I'm fairly confident I can proceed without any issues, but I'd appreciate input from someone with more expertise in this area.

javascripttwitter-bootstrapsassbootstrap-4cdn

Answer №1

If possible, it is recommended to self-host the JavaScript files.

Bootstrap includes integrity parameters in their example "how to use" code, so there is less risk of cross-site scripting attacks if their CDN is compromised (unless you omit those parameters in your code). However, if their CDN is compromised or their servers crash, the JavaScript files may not load, causing parts of your application to become unusable.

One solution could be to initially attempt to serve the files from the CDN, and if that fails, provide the user with a local version. This approach allows you to leverage caching and ensures stability in case of Bootstrap server downtime. A snippet from a discussion on this topic on freeCodeCamp illustrates this:

<script>
  if (! $.fn.modal) {
    document.write('<script src="YOUR JS LOCATION"></script>');
  }
</script>

It is recommended to place this code below the line where you include the Bootstrap CDN.

This code simply checks for the availability of a Bootstrap function and loads it from your local server if it is not found.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS HTTP POST request encountering issue with success function not functioning as expected

I am currently working on implementing a basic HTTP post request to insert data into my database. The following pages are involved: register.php contains the registration form. maincons.js houses the application controllers. sqlregister.php include ...

javascriptphphtmlangularjs

Unable to receive acknowledgment from child component within Redux

I am trying to retrieve props from Redux within a child component, but for some reason, {this.props} is showing up as an empty object. While I am successfully using react-redux connect to access the props in the parent component and pass them down to the ...

javascriptreactjsreduxreact-redux

What is the functioning process of the angular method decorator?

The tutorial on creating custom decorators in Angular introduces a throttle decorator that utilizes the lodash throttle function. The implementation of this decorator can be seen below: import t from 'lodash.throttle'; export function throttle( ...

javascriptangularangular-decorator

The value of 'this.selectedNodes' does not support iteration and is causing a

I am currently utilizing v-network-graphs to generate graphs in the front end with Vue. I have set up my data like this: data(){ return{ test: test_data, nodes:{}, edges:{}, nextNodeIndex: Number, selectedNodes: ref<st ...

javascripttypescriptvue.js

What steps should I follow to incorporate channel logic into my WebSocket application, including setting up event bindings?

I'm currently tackling a major obstacle: my very own WebSocket server. The authentication and basic functionality are up and running smoothly, but I'm facing some challenges with the actual logic implementation. To address this, I've create ...

javascriptnode.jsexpresswebsocket

Refresh the data list displayed within a specified div container

On my jsp page, I initially populate a model attribute with some data. Then, I use the following code to display this list on the jsp page: <c:forEach var="pattern" items="${patterns}"> <li class="list-group-item liitem"><st ...

javascriptjqueryspringjsp

Retrieve data from a Rails controller using Ajax

Seeking assistance and insight for a coding dilemma I'm facing. In my Rails application, I have a controller named get_songs that retrieves a hash of songs belonging to the currently logged-in user. What I'm trying to achieve is to fetch this dat ...

javascriptjqueryruby-on-railsajax

Pass a link by pressing Enter

Although the title may seem odd, I'll explain what I'm attempting to accomplish. I have a login form with two input fields, a checkbox, and a submit button. You can view a screenshot of it here: https://i.sstatic.net/nE1FY.png The terms of use a ...

javascripteventsenter

Tips for composing a hyperlink within a property

I'm a newbie to Vue.js and facing a challenge with assigning a property to a link. I'm unsure of how to write the "counter" variable from "data" in order for it to properly function as intended. export default { name: 'app', data ( ...

javascriptvue.jsaxios

Experiencing problems with malfunctioning javascript tabs

As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly. I at ...

javascripthtmlcss

Guide on storing images in a designated folder using CodeIgniter

My code is located in view/admin_view2.php <?php echo form_open_multipart('home_admin/createBerita'); ?> <div class="form-group" > <label class="control-label">upload foto</label> <inpu ...

javascriptphphtmlcsscodeigniter

Angular, display the chosen option within the text input field

Currently, I have a table with multiple columns and I am using Angular JS to display their values in various controls. For instance, I am using a Select/Option (multiple) to display column A, and I want to use another text box to display column B based on ...

javascriptangularjs

Help! My express.js query is not functioning properly

I am facing an issue with a query in express.js. Citta_p and Citta_a are two arrays, and I need my query to return all the IDs for cities. However, it seems that only the last value is being returned, as if my cycle starts from var i = 1 and skips the valu ...

javascriptjqueryhtmlnode.jsexpress

Iterate through JSON objects

Having an issue with looping through JSON using jQuery AJAX. Despite receiving the JSON data from PHP and converting it to a string, I'm unable to loop through it properly in JavaScript. In my for loop, I need to access $htmlvalue[i] to parse the data ...

javascriptphpjqueryajaxjson

The behavior of Elementor lightbox buttons upon being clicked

When using Android, I've noticed that the lightbox briefly displays a semitransparent cyan bar on the left and right buttons when they are pressed. Is there a way to control or prevent this behavior? Any suggestions would be appreciated! Thanks in adv ...

javascriptcsswordpresslightboxelementor

Unable to retrieve the parent element of an event target in AngularJS when using Internet Explorer 11

function determineClosestAncestor(startElement, callback) { const parent = startElement.parentElement; if (!parent) return undefined; return callback(parent) ? parent : determineClosestAncestor(parent, callback); }; $document.on('click', e ...

javascriptjqueryangularjsinternet-explorer-11jquery-events

What is the best way to condense all nested elements within a parent element?

I have a collapse element that contains some nested collapse elements. I am trying to make sure that when the parent collapses, the nested item also collapses. Although it appears to collapse when closed, it does not stay collapsed when I reopen the paren ...

htmlcsstwitter-bootstrapbootstrap-5

JavaScript code to access values from a JSON object

{ "4": { "structure": "Archaeological Museum", "boxes": [{ "id": "5", "name": "Ground Cassa DEMO" }] }, "5": { "structure": ...

javascriptjqueryajax

Switch content based on value with Javascript

One of my elements is: <a href="#" type="link" class="button send" classAct="button send" classSel="button send pressed" label="encrypt" title="sendmessage" onclick="add_encryption();">Encrypt</a> When toggled via the JavaScript below, I want ...

javascriptjquerytoggle

Docz: Utilizing Typescript definitions for props rendering beyond just interfaces

We are currently using Docz to document our type definitions. While it works well for interfaces, we've run into an issue where rendering anything other than interfaces as props in Docz components doesn't seem to display properly. I'm seeki ...

javascripttypescripttypescript-typings