How can I use Bootstrap with Django?
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.
Re-reading your question, 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:
-
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 namedstatic
: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/
-
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 inbase.html
that can be replaced by the actual content in my templates, which{% extend base.html %}
. -
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!
Welcome to the world of Python/Django. Like you, after years of doing web development in PHP, I've migrated to creating dynamic websites and robust web applications using this language/framework pair.
One of the really nice features of django is their automatic admin interface. I use an app called Django-Admin-Tools and django-admintools-bootstrap which transforms the default interface into a slick looking admin. https://bitbucket.org/salvator/django-admintools-bootstrap
The easiest way to install django apps or other python modules is by using pip. I would read up on using virtualenv http://readthedocs.org/projects/virtualenv/ to manage your django projects. When you set up a python virtual environment, it allows you to install django apps and python modules in a separate python install on your system.
Then, installing additional django apps is a breeze - pip install django-admin-tools - django grappelli - south - are all some of my favorites.
None of the mentioned answers worked for me, the simplest way of all I will say is directly add CDNs in your base.html which will be used to extend and you can add it in standalone/static pages as well
Read here for the bootstrap CDN and integration.