How can I use Bootstrap with Django?

Question

I'm learning python and Django coming from PHP. This is all really exciting, and I would love to use Bootstrap with Django to create sexy web pages.

As I understand it (I'm following the Django tutorial on their website), Django uses "apps" which can be included in your settings.py file. I did a quick search and found several bootstrap-themed apps, but have no knowledge on how to pick the right one. Is there a standard app most people use? All I need are the bootstrap.css and bootstrap.js files.

I'm sure I could manually place them in my root, but I'd enjoy an "all inclusive" setup within my Django install.

Answer 1

It seems that you're searching for a way to install Twitter Bootstrap as a Django app. While there are some apps out there that facilitate using Twitter Bootstrap with Django, you don't really need to use any of them.

You can simply include the Twitter Bootstrap CSS and JS at either the project or app level and refer to them in your Django templates.

To include Twitter Bootstrap in a Django app, your best bet is to:

1. Use Static Files

In your settings.py, add the path to Bootstrap (which you should download and place in your Django app under a folder named static:

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.

    '/path/to/my_project/my_app/static/',

)

Also, make sure your STATIC_URL prefix is set:

# URL prefix for static files.

# Example: "http://media.lawrence.com/static/"

STATIC_URL = '/static/'

Now, download Twitter Bootstrap and place it in the path there:

/path/to/my_project/my_app/static/bootstrap/

2. Include Twitter Bootstrap in your templates

I would link to Twitter Bootstrap documentation, but there isn't any, really. Your best bet is to take a look at the source of their starter template. Using the Django templating system is a bit beyond the scope of this question, but I'll give you this hint: Anywhere in the starter template where you find a link to a .css or .js, replace it with your STATIC_URL.

So:

<link href="../assets/css/bootstrap.css" rel="stylesheet">

becomes

<link href="{{ STATIC_URL }}/bootstrap/css/bootstrap.css" rel="stylesheet">

I use the starter template as my base.html and include {% block content %} blocks in base.html that can be replaced by the actual content in my templates, which {% extend base.html %}.

3. Or, use a 3rd party app to guide you

You might investigate is the Django Bootstrap Toolkit, which I have not used myself. I would suggest doing it yourself manually first, however, as a way to explore the project and to really understand what is going on. It's not too hard at all!