Static Files – Linux Notes

Setup

Inside your project root folder where your app folders live, add a static folder and inside of it add a css folder.

mkdir -p /myproject/static/css

Download Bootstrap https://getbootstrap.com/docs/4.0/getting-started/download/#compiled-css-and-js and put bootstrap.min.css into the css folder.

Instruct Django where to find the static files. Open the settings.py, scroll to the bottom of the file and just after the STATIC_URL, add the following:

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

Load the static files (the Bootstrap CSS file) in our template:

templates/home.html

{% load static %}<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Boards</title>

    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

  </head>

  <body>

    <!-- body suppressed for brevity ... -->

  </body>

</html>

</pre>