Issues with implementing Bootstrap as a beginner

I am encountering an issue while developing a webpage using web.py with added bootstrap and ripples. Upon running it, I am receiving the following error messages:

 - - [17/Aug/2020 08:56:01] "HTTP/1.1 GET /" - 200 OK
 - - [17/Aug/2020 08:56:01] "HTTP/1.1 GET /static/css/bootstrap-material-design.min.css" - 404 File not found
 - - [17/Aug/2020 08:56:01] "HTTP/1.1 GET /static/js/bootstrap.min.css" - 404 File not found
 - - [17/Aug/2020 08:56:01] "HTTP/1.1 GET /static/js/material.min.js" - 404 File not found
 - - [17/Aug/2020 08:56:01] "HTTP/1.1 GET /static/js/ripples.min.js" - 404 File not found
 - - [17/Aug/2020 08:56:01] "HTTP/1.1 GET /static/js/bootstrap.min.css" - 404 File not found
 - - [17/Aug/2020 08:56:01] "HTTP/1.1 GET /static/js/material.min.js" - 404 File not found
 - - [17/Aug/2020 08:56:01] "HTTP/1.1 GET /static/js/ripples.min.js" - 404 File not found

It is possible that the issue stems from either outdated libraries or another source that I am currently unaware of. Here is the snippet of the code being used:

MainLay.html:

$def with (page)
<!-- Bootstrap usage defining a css variable-->
$var css: static/css/bootstrap.min.css static/css/bootstrap-material-design.min.css

<!-- jQuery usage defining a js variable-->
$var js: static/js/jquery-3.5.1.min.js static/js/bootstrap.min.css static/js/material.min.js static/js/ripples.min.js

If you have any ideas on what might be causing this problem, I would greatly appreciate your input. Thank you in advance.

htmlcssbootstrap-4web.py

Answer №1

If the path provided is incorrect, try accessing the properties of each directory to copy the correct path and then refresh. Alternatively, you can also use links instead of reading locally to reduce the chances of encountering errors.

For helpful links, visit: [https://www.bootstrapcdn.com/][1]

Answer №2

It seems that the issue you are experiencing is connected to the file paths for your static resources. The error messages are indicating that the server cannot locate the files you are trying to access. Please ensure that the files bootstrap.min.css, bootstrap-material-design.min.css, jquery-3.5.1.min.js, material.min.js, and ripples.min.js are actually stored in the correct directories within the static/css and static/js folders relative to your main script. Check for any errors in the file names such as typos or incorrect extensions. Confirm that the directory structure is accurate and that the files have not been mistakenly placed in a different location. Also, verify that web.py is properly configured to serve static files from the static directory.

Sample code snippet:

import web

urls = (
    '/', 'index',
)

class index:
    def __init__(self):
        self.render = web.template.render('templates/')

    def GET(self):
        return self.render.main()

if __name__ == "__main__":
    app = web.application(urls, globals())
    app.run()

Ensure that your HTML template has the correct paths:


$def with (page)

<link rel="stylesheet" href="$css[0]">
<link rel="stylesheet" href="$css[1]">

<script src="$js[0]"></script>
<script src="$js[1]"></script>
<script src="$js[2]"></script>
<script src="$js[3]"></script>

Make sure that the variables for css and js are correctly set with the paths to your static files.

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

Could CSS alone achieve this sub menu position?

Sorry for the lack of clarity in my question, I am struggling to come up with a concise description. I am currently working on creating a drop-down menu using unordered lists, which is structured like this.... <ul id="menu"> <li>Menu Item ...

cssmenudrop-down-menu

Tips for programmatically relocating the slider handle in HTML 5 range input without relying on Jquery UI

INQUIRY: I am facing an issue with an HTML5 range input slider in my project. When I try to change the value of the slider using jQuery, the handle's position remains unchanged. While I am aware that this can be resolved using the .slider() method in ...

javascriptjqueryhtmljquery-ui

"Create a web resume that is easy to print and

I'm currently working on implementing a print-friendly feature for a Bootstrap 4 template resume/CV. My goal is to minimize the spacing between sections when the document is printed, allowing users to easily convert it into a PDF or Word format. You ...

htmlcssprintingbootstrap-4

Organize the HTML output generated by a PHP array

There must be a simple solution to this, but for some reason, it's escaping me right now. I've created custom HTML/CSS/JS for a slider that fetches its content from an array structured like this: $slides = [ [ 'img' = ...

javascriptphpjqueryhtmlcss

Creating a floating popup within a designated DIV by containing a panel with a textbox and a button inside

The code snippet for the popup is as follows: <div id="commentBox" class="commentBox"> <div class="panel panel-default"> <div class="panel-body"> <input type="text" value="" id="annotationText" /> <button typ ...

javascripthtmlcssangularjsarcgis-js-api

The CSS keyframe for mobile devices initiates from 100% and then proceeds to animate

Having some trouble with CSS animations on mobile devices. The animation works perfectly fine on desktop, but on mobile, it seems to display the final 100% keyframe first before animating from 0%. I've tried adding the initial style directly to the cl ...

csscss-animationskeyframe

Create a scenario where the text is placed within a set of <td></td> tags and allow it to overflow in an HTML document

Is there a way to center-align text and have it overflow the HTML cell if it's too long? Take a look at the image below for reference: https://i.sstatic.net/pnHid.png ...

htmlcssword-wrap

Limits in exporting data from an html table to a pdf document

The output on the page only displays 17 out of 60+ rows of data. I've searched online for a javascript function to help with this, but unfortunately, I couldn't find one. Here is a sample code snippet: <script type="text/javascript"> ...

javaphphtmlcss

How to Animate the Deletion of an Angular Component in Motion?

This stackblitz demonstration showcases an animation where clicking on Create success causes the components view to smoothly transition from opacity 0 to opacity 1 over a duration of 5 seconds. If we clear the container using this.container.clear(), the r ...

javascriptcssangulartypescriptangular-animations

Scraping company ratings from an Indeed job site using R

Although I have experience with R, I am new to HTML and CSS. I have been researching various web scraping methods both online and on Stack Overflow in order to implement them using R. However, I am encountering difficulties when it comes to extracting comp ...

htmlcssrweb-scrapingrvest

Angular Material Dropdown with Multi-Column Support

I'm working on customizing the selection panel layout to display items in multiple columns. However, I'm facing an issue where the last item in each column appears off-center and split, causing overflow into the next column instead of a vertical ...

cssangularangular-materialmultiple-columns

How to deactivate user controls on a Google Maps embed

I am attempting to incorporate a basic Google map into my website using the embed feature available on maps.google.com. Below is the generated code: <iframe src="https://www.google.com/maps/embed?pb=!1m12!1m8!1m3!1d2391.716465442018!2d-0.6309220000000 ...

htmlgoogle-mapsiframegoogle-maps-embed

Is there a way to modify my code to eliminate the need for a script for each individual record?

Whenever I need to create a code with the ID by browsing through my records, is there a way to make just one function for all the records? $tbody .= '<script> $(document).ready(function(){ $("#img'.$idImage .'").click(functi ...

javascriptphphtml

My experience with IE8 has been frustrating as I encounter issues while trying various methods to set min-width using

A variety of scripts are being tested: $(document).ready(function(){$(".body").addClass("ie-min");}); $(document).ready(function(){$(".body").attr("class", "ie-min");}); $(document).ready(function(){$(".body").css("min-width", "350px");}); $(document).rea ...

jqueryinternet-explorercss

Floating images using clearfix technique

I'm having trouble explaining the issue, so please check out the link. On this (A), the white background looks great, but when I add <!-- Problem here --> <ul class="thumb2"><li> <a href="/malaysia/ceiling-lights/8044-f610-255" ...

css

How does Firefox still autocomplete even with a different input label?

How does Firefox decide where to autofill passwords and usernames? I've noticed that even after changing the name, id, title, or class of an input element, Firefox still automatically fills it with my password or email address. ...

htmlfirefoxautocomplete

Searching for the closest jQuery value associated with a label input

As a beginner in JQuery, I am looking to locate an inputted value within multiple labels by using a Find button. Below is the HTML snippet. Check out the screenshot here. The JQuery code I've attempted doesn't seem to give me the desired output, ...

javascripthtmljqueryfindlabel

It seems impossible to modify the border style of a div element through a dropdown select menu

I have created a dropdown menu that is intended to change the border style of a div element. The dropdown uses select and option HTML tags. However, when I trigger the .change() event, the border style does not update to the selected value. Can someone ple ...

javascriptjqueryhtmlcsshtml-select

Fixed position toolbar within a container positioned beside a dynamically sized sidebar navigation

I'm trying to figure out how to create a fixed toolbar that fills the remaining width of the page when a side nav is collapsible. Setting the width to 100% causes it to overflow the page due to the dynamic nature of the side nav. Using calc() isn&apos ...

javascripthtmlcss

The popover seems to be failing to appear

I am struggling to get a popover to appear when clicking on an appended href element dynamically. Here are the code snippets I have tried: <div id="myPopoverContent"> ...stuff... </div> <div id="div3" style= "width:200px;height:200px;" ...

jqueryhtmltwitter-bootstrap-3popover