What are some ways to locate the address of CSS and JavaScript files?

I'm having trouble figuring out a simple issue, as I am new to this. I am experimenting with the Twitter-Bootstrap starter template in order to improve my knowledge of HTML, CSS, and JS. After copying and pasting the source code into TextWrangler and opening the html file in Firefox, I noticed that the bootstrap functionality is not working.

I suspect that this might be because certain lines like 

<link href="../assets/css/bootstrap.css" rel="stylesheet">
need to be modified to match the addresses of the css/js files on my own computer. If this is indeed the problem, how can I go about resolving it?

Below is the source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0&gtempty="">&lt;meta="" name="author" content="">

    <!-- Le styles -->
    
    <!-- Paste Source Code Here -->

  </body>
</html>
htmlcsstwitter-bootstrap

Answer №1

Your assumption about the cause being the 

<link href="../assets/css/bootstrap.css" rel="stylesheet">
line is correct.

This line specifically refers to the css file. To resolve this issue, you need to save the bootstrap files on your computer in a designated folder.

To do so, download bootstrap from and then move the css, img, and js folders into your specified directory.

In TextWrangler, modify the href attribute in your file to "css/bootstrap.css", which should appear as 

<link href="css/bootstrap.css" rel="stylesheet">
.

Save your file as index.html within the same location as the other folders that were copied over.

Repeat these steps for any additional references, such as 

<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
.

Additionally, make sure to adjust any JavaScript file references found at the bottom of the document.

Best of luck!

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

Instructions for compiling node-sass within the present directory for specific files

In my project, the directory structure looks like this: - folder1 - styles1.scss - folder2 - styles2.scss I want to utilize node-sass through the command line to generate the following output: - folder1 - styles1.scss - styles1.css - folder2 ...

cssnpmsassnode-sass

In this guide, we will explore the process of designing unique styles for ng

What is the proper way to customize CSS for a specific element? &.ng-select-focused { &:not(.ng-select-opened) > .ng-select-container { border-color: $ng-select-highlight; box-shadow: $ng-select-box-shadow; } } The offi ...

cssangularsass

HTML: What is the functionality of the reset button?

What is the inner workings of the reset button (input type="reset)? (I am interested in enhancing it to clear inputs after a post in ASP.NET MVC.) ...

htmlasp.net-mvcasp.net-mvc-3

Angular 10 Reactive Form - Controlling character limit in user input field

I'm currently developing an Angular 10 reactive form and I am looking for a way to restrict the maximum number of characters that a user can input into a specific field. Using the maxLength Validator doesn't prevent users from entering more chara ...

htmlangulartypescriptangular-forms

JQuery is unable to display a hidden element (such as a checkbox) even after using the .show() function

Currently, I am bewildered by a perplexing issue involving JQuery not displaying my hidden input in my RoR web application. While I acknowledge that my code may not be perfect (I'm quite inexperienced with JQuery or JS), I find it puzzling why the hid ...

javascriptjqueryhtmlruby-on-railssimple-form

The registration password box is filled in automatically

Recently, I noticed a strange issue on my homepage. The left side is for "registering a new account" while the right side is for "logging into an existing account." Everything was working fine until I set a password ("12345") for my root account in phpmy ...

htmlautocompletepasswords

HTML underlay with interactive z-index functionality

Is it possible to create an interactive Google Map with a frame image displayed? <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input type="button" onclick="$('#frame_image').show();" val ...

htmlcssz-index

Regular expression to match a string with a minimum of 10 characters, including at least 3 digits and alphanumeric

I need assistance creating a regular expression that validates strings with a minimum of 10 alphanumeric characters and at least 3 digits. For example: X6JV2YUW8T => True JN1H86LEKA => True 111JEJE134 => True A111111111 => True ABCDEFGHIJ =&g ...

javascripthtmlregexvalidationinput

The alignment of the Bootstrap Radio white circle is off when adjusting the HTML font size

I'm currently working on a simple web application using Bootstrap for styling. While I really like the overall look of Bootstrap, I've run into an issue with the appearance of my radio buttons when I adjust the font size in my HTML. Here is a sn ...

htmlcssbootstrap-4

"Switching from Mobile to Desktop: Redirecting back to the main

I have recently implemented a PHP mobile redirect on my website: <?php require_once('mobile_device_detect.php'); $mobile = mobile_device_detect(); if($mobile==true){ header('Location:http://www.esielectrical.co.uk/mobile'); }els ...

phphtmlmobile

Mysterious CSS "manifestation" perplexes Chrome while evading Firefox's gaze

There seems to be an issue with the jQuery plugin on this demo page: If you access it using Firefox, you'll notice that the social sharing buttons are visible and functioning properly. However, in Chrome, there appears to be a peculiar CSS computatio ...

jquerycss

Obtain the text from an altered stylesheet in Firefox

I am currently programmatically updating stylesheets for a web page using JavaScript. My method involves having a local copy of the page and all associated assets stored on a server. After I finish making changes to the stylesheets, my goal is to save the ...

javascriptcssfirefoxwebdriverselenium-webdriver

Incorporate SVG or HTML5 elements into a Box2D World

My SVG logo is primarily composed of elements. I am interested in animating it by placing it in a "gravity world". Although I am new to Box2D and Canvas, I have managed to convert my SVG into HTML5 canvas using canvg. Currently, I am going through the begi ...

htmlanimationsvgbox2dgravity

Issue arises when trying to insert an image avatar onto a globe in three.js

I have successfully implemented a rotating 3D globe using three.js with the code provided below. HTML <canvas id="canvas"></canvas> JS let camera; let renderer; function main() { const canvas = document.querySelector('#ca ...

javascriptcssthree.js

Instructing my config.rb file to direct my compiled .scss file output to the main root directory

My goal is to configure my CSS output file in the config.rb file to be located at the root level of my main directory and named "style.css". Everything works fine when I set all the filepaths in config.rb like this: http_path = "/" css_dir = "assets/css" ...

cssrubycompass-sass

The text from one section found its way into a different section, blending seamlessly

My Skills text is mistakenly appearing in the home-section. You can see the issue in the image below: https://i.sstatic.net/Bl2GJ.png In the provided picture, the Skills section is displayed within the home section, which is not the intended layout. It&ap ...

htmlcssbootstrap-4

What is the process for setting a value for a Django form field within a template?

Can you help me understand how to set a value for a django form field directly in the template? I am aware of other methods to assign initial values in Django, but in this case, the variable is only available within the template itself. If it were a regu ...

pythonhtmldjango

What is the best way to anchor an image to the bottom right corner while also adjusting its position as

Hey there! I have a challenge where I want to anchor an image at the bottom right corner of a webpage. Initially, it works perfectly using this CSS: .logo img{ position: absolute; bottom: 0; right: 0; } However, when I resize the window, the ...

htmlcssimage

Tips for arranging HTML image sources to prepare for future updates

Incorporated into the HTML are a series of images, each accompanied by text and/or transitions. To streamline positioning, each image set along with other elements (text, video, etc...) is enclosed within a div. Furthermore, every image is labeled with a n ...

htmlcss

Struggling to eliminate unwanted space with CSS styling

Despite my efforts with Google Chrome and inspecting elements, I've been unable to eliminate an irritating space. I also experimented with Firebug and attempted to modify properties in the header, headercontainer, etc. The screenshot showing the spa ...

htmlcss