Bootstrap template not working correctly Django

Question

I have a Bootstrap template that I am attempting to use with Django, and I have places the bootstrap resources in the template directory with the html file that I am trying to display. My problem is that when trying to display the html file, It only comes out as text in the browser window, so this would lead me to believe that the Bootstrap resources are not being properly used.

Here is the template I am trying to use: http://startbootstrap.com/template-overviews/stylish-portfolio/

Here is what my template directory looks like:

css
font-awesome
fonts
img
js
index.html

I am aware that It uses CDN links, but the resources were with the template when I downloaded the zip, so I left the in there. I am very new to Bootstrap and fairly new to Django as well so please go easy on me, and If I have something wrong in my terminology, please correct me. Thanks.

Sachi Tekina · Accepted Answer · 2015-03-31 03:11:27Z

4

You should place it in a static folder and configure your settings. Otherwise, if you still want to put it in template then change your settings but it is unusual. Template folder should only contain html files.

Here's a sample settings for static files.

STATIC_URL = '/static/'

# Additional locations of static files
STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(BASE_DIR, 'static'),
)

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # django.contrib.staticfiles.finders.DefaultStorageFinder',
)

and in your template (html file), call it like this:

{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}" />

edited Mar 31, 2015 at 3:11

answered Mar 31, 2015 at 3:00

Sachi Tekina

1,8105 gold badges29 silver badges51 bronze badges

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

2 Comments

JL Peyret Over a year ago

second the above. additionally, you may want to look at the network pane of the Chrome Developer Tools - they'll warn you of missing css files and give you an idea of what the static configuration above is being translated to by the server. FireFox/Firebug have same stuff, but I found it easier to see the url being used in Chrome.

PixelWarrior Over a year ago

This definitely helped, and I ended up figuring it out, with your help, and with the help of looking at @D_Supreme's code examples. Thanks.

Manmeet S. Oberoi · Accepted Answer · 2019-01-14 09:41:43Z

2

You need to declare a static folder where you place the CSS and JS files.

Refer to https://docs.djangoproject.com/en/1.7/howto/static-files/ on how to setup the static folder

A sample implementation https://github.com/Dsupreme/fests-django (Focus on where the css files are placed and how they are called)

edited Jan 14, 2019 at 9:41

answered Mar 31, 2015 at 3:00

Manmeet S. Oberoi

1,1221 gold badge17 silver badges29 bronze badges

1 Comment

PixelWarrior Over a year ago

Hey, thank you. I just solved the problem after a few hours of working on it. I appreciate your code examples that you provided. They were extremely helpful.

Collectives™ on Stack Overflow

Bootstrap template not working correctly Django

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related