9

I am trying to get bootstrap working in my django project and followed the tutorial here but it did not work. When I visit the my local project in the browser it just shows a blank page with 4 blue links. not exaclty what I was expecting. In pycharm (my ide) it tells me that I have an unresolved refrence to STATIC_URL in my template. I think the problem is that by just placing bootstrap in my project and defining it in my settings wasnt enough. any ideas?

Sorry, basically here is how my project is set up. Main_Project/ app_1, app_2 , media/, templates/, Main_Project/ so should I put boostrap under the first Main_Project, or the second

Also here is my settings in case it matters.

STATIC_ROOT = os.path.join(SITE_ROOT, 'static_files')

# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'
Improve this question

4 Answers 4

Reset to default
16

Kevin here, the author of that article from Python Diary. Since I posted that tutorial I have created other methods of enabling Bootstrap in a Django project, including a handy Project template, which can be downloaded from here:

http://www.pythondiary.com/templates/bootstrap

I have also started a Project on BitBucket since which has a Django bootstrap theme app which is super easy to use, just add it to your "INSTALLED_APPS" and then extend whichever template from the original Bootstrap website, such as starter.html among others to choose from. Of course you can also spin your own bootstrap theme as well. I try to actively update it and am looking for more suggestions to make it the "Django goto app" for developers looking to use Bootstrap in their project, the BitBucket repo can be found here:

https://bitbucket.org/kveroneau/django-bootstrap-theme

Hope this helps anyone else who may stumble upon this Stackoverflow page.

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

Comments

2

  1. first the static url in the settings.py should be looks like this:

    STATIC_URL = '/static/'

  2. After you should be a create 3 folder inside the folder static:

    • img
    • css
    • js

  3. Download Bootstrap an put inside each files correctly in above folders

  4. Finally in the template import the bootstrap:

    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/bootstrap-responsive.min.css"/> 
<script type="text/javascript" src="{{STATIC_URL}}js/bootstrap.min.js"></script>

  5. You should put the files outside the app's or inside the app to personalize each app with your static files, the diference is the url of the static.

    5.1 Outside the app the

    STATIC_URL = '/static/'

    5.2 Inside each app:

    STATIC_URL = '/App1/static/'

    STATIC_URL = '/App2/static/'

  6. And the STATIC_ROOT put

    STATIC_ROOT = ''

Improve this answer

6 Comments

i changed to {{STATIC_URL}} the sentences to don't use the {% load staticfiles %}
@Ngenator {% static ...%} won't work without {% load staticfiles %}, {{ STATIC_URL }} is just a variable set on the context by staticfiles application.
Just a question? Will that work without STATICFILES_DIR and without urlpatterns in urls.py? As far as I know it takes some additional work to serve static files with the development server.
@J0HN He edited the answer after my comment. He was using {% static ... %} without it, check the revision.
Thank you for your response. However about the STATIC_URL, do i need to create this folder? Or is it already created and I just cannot find it? Thank you
|
2

Project settings.py file (this lines are default and don't change them):

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'

In your app folder (templates folder with .html file should be there too):

Create folder "static" with subfolders (bootstrap files), structure should look like this:

app folder structure

static folder structure

In your html template file import bootstrap like this (note CSS go in head and JS go in body section):

<html>
<head>
    <title> Your title </title> 

    <!-- To prepare django for loading static files -->
    {%load staticfiles %}

    <!-- And with <link> or <script> tag you actualy import bootstrap files in page -->
    <link href={% static "css/bootstrap.min.css" %} rel="stylesheet">
</head>

<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src={% static "js/bootstrap.min.js" %}></script>


<p> Next your page code ............... </p>
<p> Next your page code ............... </p>
<p> Next your page code ............... </p>


</body>

Improve this answer

Comments

0

This is what worked for me, I followed what is written in the doc:

https://docs.djangoproject.com/en/1.10/howto/static-files/

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'settings'
]

...

STATIC_URL = '/static/'

Static files placed in project/my_app/static/my_app/css/bootstrap.min.css

The template placed here in project/my_app/templates/my_app/base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>

    <!-- Bootstrap Core CSS -->
    <link href="{% static "my_app/css/bootstrap.min.css" %}" rel="stylesheet">
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.