CSS, Bootstrap and Javascript is not working with Django

Question

I'm trying to build a webapp as a final project in my degree, but I'm having problems with configuring the css with django. I already did a few recommendations on the internet without success. When I add "style" on tags it works properly, but when I tries to use the ".css" file it doesn't load. Could anyone help me please?

Here is my html head:

{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="{% static 'static/css/index.css' %}" rel="stylesheet" type="text/css">
        <link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
        <script
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDikjsB27i23XRQad382KBcFHKNxzZ--1w&callback=initAutocomplete&libraries=places&v=weekly"
          defer
        ></script>
        <link href="{https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
        <link href="{https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap" rel="stylesheet">
        <meta name="google" content="notranslate" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="{//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <title>The Queue</title>
    </head>

My settings.py:

STATIC_URL = '/static/'
STATICFILES_DIRS = [(os.path.join(BASE_DIR, 'static'))]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

my urls.py:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('queueApp.urls')),
  
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Directories:

├───queueApp
│   │   admin.py
│   │   apps.py
│   │   models.py
│   │   tests.py
│   │   urls.py
│   │   views.py
│   │   __init__.py
│   │
│   ├───migrations
│   │   │   __init__.py
│   │   │
│   │   └───__pycache__
│   │           __init__.cpython-38.pyc
│   │
│   ├───templates
│   │       base.html
│   │
│   └───__pycache__
│           admin.cpython-38.pyc
│           models.cpython-38.pyc
│           urls.cpython-38.pyc
│           views.cpython-38.pyc
│           __init__.cpython-38.pyc
│
├───queueProject
│   │   asgi.py
│   │   settings.py
│   │   urls.py
│   │   wsgi.py
│   │   __init__.py
│   │
│   └───__pycache__
│           settings.cpython-38.pyc
│           urls.cpython-38.pyc
│           wsgi.cpython-38.pyc
│           __init__.cpython-38.pyc
│
├───static
│   ├───css
│   │       index.css
│   │
│   ├───img
│   └───js
│           index.js

Can you please elaborate whether you are deploying this app on a local machine or on any online service? — Jake Peralta
– Jake Peralta, Commented Nov 26, 2020 at 18:05

ha-neul · Accepted Answer · 2020-11-26 15:27:18Z

2

You have several problems here:

In your html file, in order to use {% static ... %}, you should add {% load static %} in the head section before all the <link..> etc. Check out the document https://docs.djangoproject.com/en/3.1/howto/static-files/
also you should change { % static 'static/css/ .. %} to { % static 'css/...%}
For the ones do not use {% static ...%}, you have many typos. For example:

These ones have additional {

<link href="{https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

        <link href="{https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap" rel="stylesheet">

This link seems wrong.

        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

the following one, you should not use {% static ..% }

<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">

Since there are many errors, it may be best to delete them all, and add those lines (after correction of cause) one-by-one to resolve this issue.

edited Nov 26, 2020 at 15:27

answered Nov 26, 2020 at 15:06

ha-neul

3,28814 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yago Gomes Over a year ago

I followed your advise to delete them all and add again correcting one by one and it worked. Thank you!

ha-neul Over a year ago

Glad to hear that your problem is solved. Please kindly accept my answer. Thanks!

Kyle Hynes · Accepted Answer · 2020-11-26 15:11:25Z

0

might be a problem with serving the static files. if you havnt already, try checking out: https://docs.djangoproject.com/en/3.1/howto/static-files/

answered Nov 26, 2020 at 15:11

Kyle Hynes

114 bronze badges

Comments

Jake Peralta · Accepted Answer · 2020-11-26 15:16:01Z

0

Inside your Settings.py file try changing STATIC_ROOT directory name to 'static' instead of 'staticfiles'.

So, your code will look like:

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

And for safe side try running python manage.py makemigrations and then python manage.py migrate. So that if any changes happens within databases will get applied.

answered Nov 26, 2020 at 15:16

Jake Peralta

5473 silver badges15 bronze badges

Collectives™ on Stack Overflow

CSS, Bootstrap and Javascript is not working with Django

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related