Bootstrap has made the life of back-end developers a little easier. With the ability to make almost all the apps look cleaner then how they would originally appear, it has indeed been a great tool. However, despite the helpful tutorials and examples out there, as is the case with many, they all suffer from the same three flaws:
- No tutorial can be a “one size fits all” solution, and that is a reality. Which is why there are many tutorials out there and the reason why I am writing one as well.
- Deprecation with time. All tutorials suffer the same time deprecation, where packages are updated, deprecated or removed, configurations altered etc. Unfortunately, the tutorials mostly stay static and eventually end up being a good start guide but no longer step by step instructions. Though I would like to avoid this eventuality, I do not guarantee it.
- Assumption of knowledge. Every tutorial assumes a certain degree of know-how of the technologies involved, which sometimes, is just asking too much but is rarely avoidable, otherwise, a post as simple as this would have to be a book.
Since I am a novice at bootstrap (if it works its beautiful), I decided, that I would go through the motions of bootstrapping a simple Django application, both the front-end template, as well as, the admin section. Depending on how long it would take to get this functional, this post may take more than a few days for me to publish and recognizing the fact that people rarely give details of what OS and what versions of the packages are involved, I will try to be more succinct in my explanation.
- python and Python-Django Framework
- virtualenv and pip
Operating System and Python:
I am developing on Ubuntu, using Python 2.7.6 . Here are the particulars:
#command to find the release cat /etc/lsb-release #Result DISTRIB_ID=Ubuntu DISTRIB_RELEASE=14.04 DISTRIB_CODENAME=trusty DISTRIB_DESCRIPTION="Ubuntu 14.04.1 LTS"
Setup a virtual environment and a basic Django project, with a dummy app. The following snippet shows all the steps I followed to achieve this.
#command to create virtual env using virtualenvironment wrapper mkvirtualenv bootstrap_test #output ''' New python executable in bootstrap_test/bin/python Installing setuptools, pip...done. ''' #activate venv workon bootstrap_test #install django pip install django #output ''' Downloading/unpacking django Downloading Django-1.7-py2.py3-none-any.whl (7.4MB): 7.4MB downloaded Installing collected packages: django Successfully installed django Cleaning up... ''' #checking all packages pip freeze #output ''' Django==1.7 argparse==1.2.1 wsgiref==0.1.2 ''' #create django project django-admin.py startproject bstrap #create dummy app inside project django-admin.py startapp dummy #checking bstrap project directory structure using tree tree bstrap #output ''' bstrap ├── bstrap │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── dummy │ ├── admin.py │ ├── __init__.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py └── manage.py '''
The above steps are pretty simplistic and if you are confused at this point, continuing might be a little hard. Before continuing to the next phase, go to ‘bstrap/bstrap/settings.py‘ and add dummy to the installed apps, so it looks something like:
# Application definition INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'dummy', )
Now before we delve into bootstrapping, lets just check that the admin section of the app is working, obviously, first we run migrate, and set the admin user and password. Then do a runserver, and assuming that you did not specify an ip, the server will be launched at http://127.0.0.1:8000/.
Since we haven’t configured any views, only the admin site will be working at the moment, and that is all we need.
Navigate to http://127.0.0.1:8000/admin/ and you will see the standard django admin template after you login with the superuser you created during migration.
After ensuring that the app works; we begin with the simple bootstrap objective first…bootstrap django admin.
Django Admin Bootstrap:
The major reference for this particular section comes from Riccardo Forina Blog , who designed and implemented the pip package we will be using. For all the details as to how to achieve this, please visit the original blog post. Here I will be repeating what he did and showing the output of the work. As per his instructions:
- install the pip package django-admin-bootstrapped in your virtual environment by running “pip install django-admin-bootstrapped”
- Add ‘django_admin_bootstrapped.bootstrap3‘, into the INSTALLED_APPS before 'django.contrib.admin'.
I followed the above two steps, re-ran my runserver, navigated to http://127.0.0.1:8000/admin/ and voilla!!! the admin was bootstrapped….
Django Templates Bootstrap:
So first, lets add the static configuration to the setting file. I have a configuration that I use in most of my application, which is as follows:
Next, create a folder in your main project directory called “static”, download Bootstrap and add the unzipped files to the “static” folder you created, so that your project folder structure now looks something like this:
bstrap/ ├── bstrap │ ├── __init__.py │ ├── __init__.pyc │ ├── settings.py │ ├── settings.pyc │ ├── urls.py │ ├── urls.pyc │ ├── wsgi.py │ └── wsgi.pyc ├── db.sqlite3 ├── dummy │ ├── admin.py │ ├── admin.pyc │ ├── __init__.py │ ├── __init__.pyc │ ├── migrations │ │ ├── __init__.py │ │ └── __init__.pyc │ ├── models.py │ ├── models.pyc │ ├── tests.py │ └── views.py ├── manage.py └── static └── bootstrap ├── css │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff └── js ├── bootstrap.js └── bootstrap.min.js
Now you have setup the basis for bootstrapping your templates. I created a templates folder and added an example template I copied from the bootstrap website.(Starter Template). I called it base.html.
Now in order to actually render and view the bootstrap result, I changed two files. The urls in the bstrap app to look like…
from django.conf.urls import patterns, include, url from django.contrib import admin urlpatterns = patterns('', # Examples: url(r'^$', 'dummy.views.home', name='home'), # url(r'^blog/', include('blog.urls')), url(r'^admin/', include(admin.site.urls)), )
and the views in the dummy app to look like…
from django.shortcuts import render from django.shortcuts import render_to_response def home(request): return render_to_response('base.html')
And you are done! Running the runserver now, and navigating to http://127.0.0.1:8000/ should show you the “Starter Bootstrap template”…
P.S if you are looking for an easy way to boostrap your forms in django, I recommend you navigate to django-bootstrap-form app and use that.
Hope this helps!!!