CSS fails to load on DJango platform

I am currently working with two apps in my project: Home and Header.

The HTML code for the Home app can be found in project_folder -> home -> templates -> home -> base_home.html

{% extends 'header/base_header.html' %}

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Home</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    </head>
    <body>
        <header>
            {% block content %}
            {% endblock %}
        </header>
    </body>
</html>

The Header is located in project_folder -> header -> templates -> header -> base_header.html:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
       ...
   </form>

This is the settings.py:

import os
from pathlib import Path

...

And also the project tree in PyCharm (maybe this visual is easier to read than the good old cmd tree):

projecttree

My issue is that my project is not loading the CSS properly, only displaying the HTML of the navbar.

sitenotworking

Thank you for your assistance and time!

cssdjangobootstrap-5

Answer №1

To include static files in your Django project, start by adding {% load static %} at the beginning of your base HTML file. To link a CSS file, use this format: <link rel="stylesheet" href="{% static 'path/style.css' %}> within the head section. Don't forget to run python manage.py collectstatic after making changes to ensure they take effect.

Answer №2

There appears to be an issue with linking your CSS file in your Django project. To resolve this, be sure to add the {% load static %} tag at the beginning of your HTML file and utilize the static template tag for proper CSS file linking.

{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
    <header>
        {% block content %}
        {% endblock %}
    </header>
</body>
</htmt>

update project urls.py

urlpatterns = [
path('admin/', admin.site.urls),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Ensure that your CSS file is located in the correct directory within your static files folder and verify that your STATIC_URL is properly set up in your Django settings.

Execute the following command

Python manage.py collectstatic

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

Best Practices for Serializing Relationships in Django Rest Framework

Attempt to serialize these Models: Model: class Order (models.Model): id = models.AutoField(primary_key=True) date_create = models.DateField(auto_now_add=True) date_change = models.DateField(auto_now=True) total = mode ...

jsondjangodjango-modelsdjango-rest-framework

I'm looking to design a button with text positioned beneath an icon using either Bootstrap 5 or CSS. How

Is there a way to create buttons like the ones shown in the examples using Bootstrap 5 or custom CSS classes? Examples: [Set of buttons][1] Notice how some of them function as dropdown buttons. I've searched for examples but most of them only show ...

cssbuttonbootstrap-5bootstrap-cards

Positioning an HTML div

Currently, I am diving into the world of HTML and have included a relative div in my code. Although there are two additional divs positioned before it, they do not overlap; unfortunately, the first two still occupy space above the relative one. My desire ...

htmlcss

Instructions for aligning the final LI element to the right in a Bootstrap 5 navbar

I noticed that on the Bootstrap 5 site, they only display non-list nav items aligned to the right. In my case, I have a total of 4 menu items, with 3 needing to be left-aligned and the last one pushed to the right. <nav class="navbar navbar-expand ...

bootstrap-5

Adding code containing various Google Maps elements in a fresh browser window using JavaScript

I've encountered an issue while trying to create a new page with a Google map and title based on the button clicked. Interestingly, when I copy/paste the HTML in the "newhtml" variable into an actual HTML file, it works perfectly fine. However, it doe ...

javascriptjqueryhtmlcssgoogle-maps

Text using Bootstrap positioned to the right of the breadcrumb navigation bar

Currently, I am using the default theme with Bootstrap 3. I have implemented breadcrumbs as shown below: <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> < ...

csstwitter-bootstrap-3

Tips for showcasing the currently active item in a Bootstrap dropdown menu using jQuery

I am trying to highlight the menu item that is selected in a drop-down menu. I attempted the following code, which works if I prevent the default behavior of the link element, but I do not want to do that. So I tried using local storage instead, but it d ...

javascriptjqueryhtmlcsstwitter-bootstrap

Two distinct sets of radio buttons with separate functionalities

I have a unique situation where I have two distinct sections that contain sets of radio buttons with different values and IDs. However, I am facing an issue as I can only select one button at a time for both sets. My requirement is to have these two sets ...

csshtmlradio-button

My approach to using this style in React involves utilizing the class attribute as follows: "class[attribute]" [Updated version 2]

When trying to customize an element based on its attribute, the process is a bit different in React compared to pure CSS. Here's an example: <div class='something' data-test='4'></div> ... .something[data-test] { bac ...

cssreactjs

Switch up image origin when image reaches screen boundary

I am trying to create a DVD screensaver with changing images each time it hits the edge, but I can't seem to get it to work. I've attempted using the code snippet below: var img = document.getElementById("myImage"); img.src = 'img/new-image. ...

javascripthtmlcss

What is the best way to assign a unique color to two overlapping cells in an HTML table using HTML and jQuery?

I have a task to highlight a row or column when a checkbox is selected, similar to the example shown in the image below. How can I adjust the code so that the overlapping cell gets a different color instead of green or yellow? For instance, in the image b ...

jqueryhtmlcss

Is VS Code highlighting compatible with template string CSS in Emotion?

Is there a way to enable syntax highlighting for emotion's template string css in VS Code? I've been looking for plugins, but all of them seem to focus on snippets. I have tried using css({ camelCaseCssProps:...}), which works. However, I am att ...

cssvisual-studio-codestyled-componentssyntax-highlightingemotion

Setting Aggrid style height to 100% in JustPy made easy

I am attempting to adjust the Aggrid height style to 100%, but unfortunately, the table is not displaying as expected. I have tried using viewport and pixel measurements, which worked fine. Interestingly, percentage width is working perfectly well. My goa ...

pythoncssag-gridjustpy

Adjust the dimensions of polymer components (checkbox)

When attempting to adjust the size of the paper-checkbox, I experimented with changing the width and height properties in my CSS file. Additionally, I tried using transform: scale(2,2). The scale property resulted in blurriness, while adjusting the width ...

csspolymer

Guide on displaying Adsense ads specifically for mobile devices

Can anyone provide me with a proper method to show/hide my AdSense ads on both mobile and desktop? I am currently using a method that results in 2 console errors. Here is the current approach: We are utilizing two classes, "mobileShow" and "mobileno," t ...

cssmobiledesktopadsense

Moving through divisions that share a common class name using jquery

I am experimenting with a plugin that allows me to attach popups to images. My goal is to enable navigation between all popups using previous and next buttons upon clicking on a popup. Below is the element when it's displayed: <div class="imp-too ...

javascriptjqueryhtmlcss

Adjust the size of bootstrap card titles to match up with the image on the page

I am facing an issue where the title of the second card is pushing the image down. Is there a way to dynamically resize the card title to align all the images properly? Any help would be appreciated. https://i.sstatic.net/PRRHl.png Bootstrap Card ...

cssimagealignmentbootstrap-5bootstrap-cards

How can I center align all images using Bootstrap?

My current grid images are aligned in a specific way. https://i.sstatic.net/RmNE9.png However, I aim to adjust the grid images to look like this, specifically focusing on centering "img 1". How can I achieve this? https://i.sstatic.net/frNvp.png HTML ...

htmlcssbootstrap-4

Align watermark content to the far left side

Having trouble getting my watermark to align properly on the left side of my website's main content. Here is how it currently looks: https://i.sstatic.net/Nfhh5.png The issue arises when I resize the screen or switch to mobile view, as the watermark ...

htmlcssreactjstypescriptbootstrap-4

Animating content to slide into view in the same direction using CSS transitions

My goal is to smoothly slide one of two 'pages', represented as <divs>, into view with a gentle transition that allows the user to see one page sliding out while the other slides in. Eventually, this transition will be triggered from the ba ...

javascriptjquerycsscss-transitionscss-animations