I'm having trouble with getting my Bootstrap CSS and JS links to function properly

The paths for the Bootstrap CSS and JS files have been included in the code, but unfortunately, they are not working. Instead, I am getting the following errors in the console:

  • GET http://127.0.0.1:5000/[https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css] net::ERR_ABORTED 404 (NOT FOUND)
  • GET http://127.0.0.1:5000/[https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js] net::ERR_ABORTED 404 (NOT FOUND)

Below is a snippet of the code where the path is specified:

<script src="C:\Users\DELL\Desktop\CS50X\project\static\bootstrapjs/bootstrap.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

I even tried using CDNs, but encountered similar error messages. Additionally, I attempted to use links provided in the documentation without success.

javascripthtmlcssflaskbootstrap-5

Answer №1

Consider utilizing a relative reference and ensuring the script is stored within your project directory.

<script src="./scripts/local_file.js">

Alternatively, you can use a CDN reference by providing the full address.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">

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

Is it possible to access the CSS property from an external CSS file even when inline styles are used?

Is there a way to retrieve the css property from an external source using JavaScript or jQuery even if inline styles are applied to the same element? Here's an example: <div id="my" style='left:100px'>some content</div> <styl ...

jquerycss

Unable to locate index.html file in Docker container while dockerizing React application

I'm a newcomer to Docker and I'm looking to containerize my react app. The index.html file is located in the public folder within my react project. However, when I try to run the docker image, it fails with an error indicating that the index.html ...

javascriptnode.jsreactjsdockerdockerfile

Using the Match() function with an array of objects

I am working with an object array containing multiple variables. let Novels = []; class Novel { constructor(isbn, title, author, edition, publication, year) { this.isbn = isbn; this.title = title; this.author = author; this.publicat ...

javascripthtmlarraysstring

Troubleshooting Safari compatibility with CSS transitions: a first attempt

Greetings everyone, I am a complete beginner here so please bear with me. After looking at some examples, I have managed to create a start/stop slowdown feature. Here is the JSFiddle link for reference .small-wheel, .big-wheel{ transition: all 2s ease ...

jquerycsssafaritransition

What is the best way to display the current time (generated through JavaScript) within a designated div element?

During my JavaScript studies, I stumbled upon the following code snippet: function printTime() { var d = new Date(); var hours = d.getHours(); var mins = d.getMinutes(); var secs = d.getSeconds(); document.body.innerHTML = hours+":"+mins+":"+sec ...

javascripthtmlfunctiontime

Strange border adjustment for customized-height input[type=button] in Internet Explorer 6 and Firefox 3

Upon my discovery, I encountered a peculiar issue in IE6/FF3 when trying to set a custom height (even if it matches the default) on a button. The following code illustrates that although both buttons have the same height, their padding differs inexplicably ...

htmlcssbuttoninputpadding

Utilizing jQuery/AJAX to interact with database in Django

Seeking assistance as I've tried multiple times with little success. Using the tango with Django book and various online examples, but no luck. Currently designing a 'Fake News' website with Django featuring a mini-game where users vote on w ...

javascriptjqueryajaxdjango

Unable to get the code for automatically refreshing a DIV every 5 seconds to function properly

My Inquiry Regarding DIV Refresh I am having issues with the code below that is supposed to automatically refresh the DIV id refreshDiv every 5 seconds, but it is not working as expected. <div id ="refreshDiv" class="span2" style="text-align:left;"&g ...

javascriptajaxjquery

Choosing an id of my preference to set as the value in the ng-options select list and ensuring proper binding with ng-model

When using Angular, I am trying to create a select list where the value corresponds to the actual id of an object. I want to bind this correctly with the ng-model directive. Here is my attempt: <select ng-model="selectedPersonId" ng-o ...

javascriptangularjsselectlistangularjs-ng-options

SVGs do not display on iPhones

Having some issues with my code - specifically, I have an SVG animation that seems to work on all devices except iPhones. I've been struggling to find a solution. Here is the code snippet for the SVG: <div class="contenuto-svg"> <svg vi ...

javascripthtmlcsssvg

Styling anchors that are focused or visited while scrolling using CSS and jQuery

I'm facing a challenging question that I can't seem to figure out on my own. At the top of my page, I have some anchors that smoothly scroll down to different articles: I would like to indicate to visitors their location on the page by rotating ...

jquerycssscrollanchor

What is the best way to find a partial string match within an array of objects when using Jest?

I am currently utilizing the following versions: Node.js: 9.8.0 Jest: 22.4.2 A function called myFunction is returning an array structured like this: [ ... { id: 00000000, path: "www.someUrl.com/some/path/to" } ... ] I ...

javascripttypescriptjestjs

What is the best way to insert a line break into every row of the table I'm displaying?

My current project involves building a web scraper that successfully prints a table, but the formatting of the table is less than satisfactory. I've experimented with a few solutions so far: 1) const people = [...peopleList].map(personEntry => pe ...

javascriptnode.jsweb-scrapingfsnightmare

What is the best way to integrate HTML code within a JavaScript function?

I need the HTML code to execute only when a specific condition in JavaScript is met. Here is the JavaScript code: <script type="text/javascript"> $(document).ready(function () { if(window.location.href.indexOf("index.php") > -1) { ...

javascripthtml

Guide on transferring control from a successful jQuery event to an HTML form

I am currently using the following jQuery code to validate user details. $.ajax({ type: "POST", url: "Login", data:'uname='+encodeURIComponent(uname)+'&'+'pass='+encodeURIComponent(pass), ...

javascriptjqueryhtml

Looking for ways to incorporate both external and internal styling using jQuery and CSS in my template?

I've been working on a django project for a while now, and I'm facing some challenges with getting external and internal CSS to work. Only inline CSS seems to be functioning properly. I have two questions: How can I get external or internal C ...

jqueryhtmlcssdjangodjango-crispy-forms

Personalize the pagination or other elements of Splide in a Svelte component to suit your needs

I am currently integrating Splide into my Svelte application and facing an issue with the pagination styling. The pagination is appearing on top of my images and is too transparent for my liking. I'm utilizing Svelte Splide to incorporate this library ...

htmlcsssveltesplidejs

What is the best way to justify Bootstrap 5 navbar items to the right side?

How can you right-align Bootstrap 5 navbar items? In Bootstrap 4, it was ml-auto. However, this does not work for Bootstrap 5. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

htmlcssnavbarbootstrap-5text-align

Can Node.js endpoints effectively handle the garbage collection of new class instances?

Just diving into node.js I'm currently dealing with a lengthy and messy function that constructs a CYPHER query for Neo4j. I am considering transforming it into a class, complete with methods, along with a corresponding mocha spec. The expected usag ...

javascriptnode.jsexpress

What is the best way to adjust the size of a column when hovering

What I am attempting to achieve is, I would like the column box to have a 100% width, and when it is hovered over, I want it to transition to the left, with the width of the column box being about 60%, revealing a second block that shows up as 20% width o ...

jqueryhtmlcsshover