Issue with bootstrap 4 CDN not functioning on Windows 7 operating system

No matter what I do, the CDN for Bootstrap 4 just won't cooperate with Windows 7. Oddly enough, it works perfectly fine on Windows 8. Here is the CDN link that I'm using:

<!doctype html>
<html lang="en>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfcNcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e7f8e7e7f2e5b9fde4d7a6b9a6a1b9a7">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

Even though this code is directly from the Bootstrap official website, I've encountered issues when trying to use it. After downloading it, only the CSS file seems to work, while the JavaScript doesn't function properly.

Answer №1

Check out these meta tags (feel free to update the version as needed)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e8988798988d9ac6829ba8d9c6d9dec6d8">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Answer №2

When I tested it on my Windows 7 system with the provided code, everything worked smoothly on my end. You might want to investigate if there's a firewall or antivirus software that could be preventing the JavaScript file from loading via CDN. Give it a look and see if that resolves the issue.

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

React State Update Triggered by Changing Hidden Input/Textarea Value - No User Input Required

To activate a function when the contents of a hidden input, textarea, or textfield change in React without requiring user input to trigger it, you will need to dynamically adjust the value of the hidden input and then have the function automatically exec ...

Tips on reversing a numeric value with scientific notation in nodeJS

Exploring the optimal method to reverse an integer (positive and negative) in NodeJS 12 without the need to convert the number to a string. This solution should also accommodate numbers written in scientific notation such as 1e+10, which represents 10000 ...

Executing jQuery post request on a div loaded via ajax

I'm facing a challenge with my webpage. I have a section where the content of a div is loaded via ajax. This div contains forms, and after submission, it should update to display the new content without refreshing the entire page. Can anyone guide me ...

The Ajax success callback unexpectedly displays the number "1" in the top left corner of the empty page instead of updating the specified div

Currently, I am in the process of developing a Yii2 application. I have encountered an issue where I select data from a Bootstrap modal popup and submit it to a controller action that contains an insert query. The problem arises after submitting the data f ...

Looking for assistance in determining a solution for progress bar implementation

Currently, I am developing a simple application using web technologies like HTML, CSS, and jQuery Mobile. This app enables me to create goals and save them to a listview using the <li> element. Every <li> representing a goal will have an assoc ...

Designing a dynamic button that expands on hover to catch the eye

My instructor has provided us with this code snippet: <a class="btn btn-tertiary" href="#"> <span class="circle"> <i class="arrow-right"> </i> </span>Create profile </a> .btn.bt ...

PHP Form Submission: A Simple Guide

One scenario that I'm facing is using the submit button event to populate a field in my form with a value. However, now I'm having trouble getting the form to submit at the same time. Any suggestions on what I can do? Check out this link for mor ...

AngularJS: Enhancing Date Display and Organization

Looking to change the date format from "Mon Oct 12 2015 00:00:00 GMT+0530 (IST)" to "YYYY/MM/DD" within my controller. ...

Determine the quantity within the data array using javascript

My dataset contains an array with thousands of objects structured like this: var data = [ {type:'A',time:'2009'}, {type:'A',time:'2009'}, {type:'A',time:'2009'}, {type:'A',time: ...

Is the promises functionality respected by the Nextjs API?

Greetings, I hope all is well with you. I am currently learning NEXTJS and working with its API, but I have encountered a problem. When I click too quickly, the promises seem to get stuck or encounter issues. You can see the tests in action in this brief 3 ...

"An error was encountered with the JSON acceptance due to an

When I call an external json API, the response is coming back as JSON. If I don't specify the datatype as JSONP, the API fails due to an access control issue. I can successfully hit the API with Postman and receive the response. However, in the conso ...

Meteor: Incorporating New Fields when Creating an Account

Currently, I am experimenting with the Meteor Roles package found at https://github.com/alanning/meteor-roles in order to add a new field to the user model. The user creation process goes smoothly without any issues, however, the 'roles' field t ...

Establish a connection using node.js to enable communication between a server and a client

Running a node.js Server:- // *********** Setting up a server to receive orders ************ // // requiring the http module. // var http = require('http'); // initializing request variable as an empty string. // var req = ""; // creating th ...

Receive a notification for failed login attempts using Spring Boot and JavaScript

Seeking assistance with determining the success of a login using a SpringBoot Controller. Encountering an issue where unsuccessful logins result in a page displaying HTML -> false, indicating that JavaScript may not be running properly (e.g., failure: f ...

The Hydration error is caused by dynamic imports in NextJS v14.2.3

While updating NextJS from v13 to v14, I encountered a Hydration error due to dynamic imports. Is there a way to resolve this issue? const MyComponent = dynamic(() => import('../components/MyComponent')) Is there a fix that allows for both la ...

Is it feasible to extract color information from Google Calendar using Fullcalendar jQuery?

Is there a way to automatically retrieve the color set on a Google calendar for events? While looking at gcal.js, I didn't find any information about this feature, but in Google's JSON API (json-c), there is a mention of color. Could it be possi ...

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

I am having trouble adjusting the height of a popover that emerges from a select validator form in Material UI. Despite attempting various methods, including adding the following CSS to the main class: '& .MuiPopover-paper': { height: &apos ...

Generate a four-dimensional array populated with the data retrieved from an Ajax request

In my JavaScript code, I have an array that looks like this: var data = [ { y: '2017-01', a: 50, b: 90, c:110}, { y: '2017-02', a: 65, b: 75, c:120}, { y: '2017-03', a: 50, b: 50, c:10}, ...

Express server consistently receives JSON requests that contain no data in the request body

Currently, I am in the process of developing a small server and website using Express. At this point, my goal is to send a POST request to my Express server with basic credentials encoded as JSON. The issue I am facing is that no matter what I attempt, th ...

Pass on the touchmove event from the panel to the content using jQueryMobile

Within my interface, I have a link labeled myLink located in a side panel labeled myPanel, along with some content labeled myContent. My goal is to: Tap and hold on the link myLink within the panel myPanel Have the panel myPanel close immediately Add an ...