django-bootstrap-ui aims to be a powerful Django app to ease the integration of the popular Bootstrap UI framework. It is written in Python and built on the Django web framework.
- Full-featured Bootstrap 3 template (3.3.7)
- Latest Font Awesome integration (4.7.0)
- Built-in Bootstrap and Bootswatch themes (3.3.7)
- Ready-to-use Bootstrap component templates
- Intuitive template tag API for generating valid Bootstrap markup
- Extensive and up-to-date documentation
- Mainstream Python (2.7, 3.3, 3.4, 3.5) and Django (1.8, 1.9, 1.10) support
- Outstanding test coverage
- Continuously integrated codebase
Below is the list of currently supported combinations of Django and Python:
# | Django | Python |
---|---|---|
1 | 1.8 | 2.7, 3.3, 3.4, 3.5 |
2 | 1.9, 1.10 | 2.7, 3.4, 3.5 |
First install the package using
pip
:pip install django-bootstrap-ui
Add
bootstrap_ui
to yourINSTALLED_APPS
setting:INSTALLED_APPS = ( ... 'bootstrap_ui', ... )
Prepare your page for Bootstrap and provide your content:
Extend
bootstrap-skeleton.html
in your base template:{% extends "bootstrap_ui/bootstrap-skeleton.html" %}
Fill predefined blocks with your content:
{% block body-content %} <h1>Hello, I'm using django-bootstrap-ui!</h1> {% endblock %}
You can style your page with Bootstrap or Bootswatch themes. Set DJANGO_BOOTSTRAP_UI_THEME
to a valid identifier in your settings.py
for a project-wide default theme:
# django-bootstrap-ui settings
DJANGO_BOOTSTRAP_UI_THEME = 'bootswatch-paper'
Render complete Bootstrap components by including our default implementations. Example:
Provide a list of strings
['alpha', 'beta', 'gamma']
as template variableitems
Include
listgroup.html
parameterized withtype='list'
anditems=items
:{% include 'bootstrap_ui/listgroup.html' with type='list' items=items only %}
Generate your own, customized Bootstrap elements using our template tags. Example:
Load
bootstrap_ui_tags
in your template:{% load bootstrap_ui_tags %}
Use Bootstrap components through intuitive template tags:
{% listgroup %} {% listgroupitem %} Your raw text. {% endlistgroupitem %} {% listgroupitem %} You may also use a {{ context_variable }}. {% endlistgroupitem %} {% endlistgroup %}
Some Bootstrap components support different html tags, to change the default add a parameter:
{% listgroup use_tag="div" %} ... Your list group content goes here. ... {% endlistgroup %}
Continue reading in our detailed documentation at readthedocs.org.
The code is open source and released under the ISC License (ISCL). It is available on GitHub and follows the guidelines about Semantic Versioning for transparency within the release cycle and backward compatibility whenever possible.
All contributions are welcome, whether bug reports, code contributions and reviews, documentation or feature requests.