[Django]-How can I use Bootstrap with Django?

by

82👍

✅

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:

  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!

👤urbushey

5👍

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.

👤Hacking Life

2👍

What if you simply install twitter-bootstrap using pip:

follow the instructions:

https://pypi.python.org/pypi/django-twitter-bootstrap/

for the simple configuration.

👤Syed Affan Aslam

2👍

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.

👤Utkarsh

Leave a comment