Django Bootstrap4
Django Bootstrap4
Release 0.0.8
Dylan Verheul
1 Installation 3
2 Quickstart 5
2.1 Example template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Template tags and filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.4 Demo application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3 Migration 7
3.1 Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
5 Settings 21
6 Templates 25
6.1 bootstrap4/field_help_text_and_errors.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
6.2 bootstrap4/form_errors.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
6.3 bootstrap4/messages.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
6.4 Other . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
i
7 Widgets 27
7.1 RadioSelectButtonGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
8 Contributing 29
8.1 Types of Contributions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
8.2 Get Started! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
8.3 Pull Request Guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
8.4 Tips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
9 Authors 33
9.1 Development Lead . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
9.2 Contributors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
10 History 35
10.1 Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
10.2 0.0.8 (2019-03-12) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
10.3 0.0.7 (2018-08-22) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
10.4 0.0.6 (2018-02-14) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
10.5 0.0.5 (2018-01-03) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
10.6 0.0.4 (2017-10-26) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
10.7 0.0.3 (2017-09-24) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
10.8 0.0.2 (2017-09-06, not released on PyPI) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
10.9 0.0.1 (2017-06-04) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
10.10 Unreleased (2017-04-25) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
ii
django-bootstrap4 Documentation, Release 0.0.8
Contents:
Contents 1
django-bootstrap4 Documentation, Release 0.0.8
2 Contents
CHAPTER 1
Installation
Alternatively, you can install download or clone this repo and install from its folder with:
$ pip install -e .
3
django-bootstrap4 Documentation, Release 0.0.8
4 Chapter 1. Installation
CHAPTER 2
Quickstart
{# Display a form #}
<form action="/url/to/submit/" method="post" class="form">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
<button type="submit" class="btn btn-primary">
Submit
</button>
{% endbuttons %}
</form>
5
django-bootstrap4 Documentation, Release 0.0.8
2.3 Settings
You can set defaults for django-bootstrap4 in your settings file. Refer to Settings for more information.
6 Chapter 2. Quickstart
CHAPTER 3
Migration
3.1 Icons
Bootstrap 4 does not ship with an icon set, so everything regarding to icons has been removed.
If you need easy access to icons that are compatible with Bootstrap 4, please consider https://github.com/zostera/
django-fa.
7
django-bootstrap4 Documentation, Release 0.0.8
8 Chapter 3. Migration
CHAPTER 4
Note: All the following examples it is understood that you have already loaded the bootstrap4 template tag
library, placing the code below in the beginning that each template that bootstrap4 template tag library will be
used. Read the Installation and Quickstart sections on how to accomplish this.
4.1 bootstrap_form
bootstrap4.templatetags.bootstrap4.bootstrap_form(*args, **kwargs)
Render a form
Tag name:
bootstrap_form
Parameters:
form The form that is to be rendered
exclude A list of field names (comma separated) that should not be rendered E.g. ex-
clude=subject,bcc
See bootstrap_field for other arguments
Usage:
{% bootstrap_form form %}
Example:
9
django-bootstrap4 Documentation, Release 0.0.8
4.2 bootstrap_form_errors
bootstrap4.templatetags.bootstrap4.bootstrap_form_errors(*args, **kwargs)
Render form errors
Tag name:
bootstrap_form_errors
Parameters:
form The form that is to be rendered
type Control which type of errors should be rendered.
One of the following values:
• 'all'
• 'fields'
• 'non_fields'
default 'all'
{% bootstrap_form_errors form %}
Example:
4.3 bootstrap_formset
bootstrap4.templatetags.bootstrap4.bootstrap_formset(*args, **kwargs)
Render a formset
Tag name:
bootstrap_formset
Parameters:
formset The formset that is being rendered
See bootstrap_field for other arguments
Usage:
{% bootstrap_formset formset %}
Example:
4.4 bootstrap_formset_errors
bootstrap4.templatetags.bootstrap4.bootstrap_formset_errors(*args, **kwargs)
Render formset errors
Tag name:
bootstrap_formset_errors
Parameters:
formset The formset that is being rendered
layout Context value that is available in the template bootstrap4/form_errors.html as
layout.
Usage:
{% bootstrap_formset_errors formset %}
Example:
4.5 bootstrap_field
bootstrap4.templatetags.bootstrap4.bootstrap_field(*args, **kwargs)
Render a field
Tag name:
bootstrap_field
Parameters:
field The form field to be rendered
layout If set to 'horizontal' then the field and label will be rendered side-by-side, as long as
there is no field_class set as well.
form_group_class CSS class of the div that wraps the field and label.
default 'form-group'
field_class CSS class of the div that wraps the field.
label_class CSS class of the label element. Will always have control-label as the last CSS
class.
show_help Show the field’s help text, if the field has help text.
default True
show_label Whether the show the label of the field.
• True
• False/'sr-only'
• 'skip'
4.4. bootstrap_formset_errors 11
django-bootstrap4 Documentation, Release 0.0.8
default True
{% bootstrap_field field %}
Example:
4.6 bootstrap_label
bootstrap4.templatetags.bootstrap4.bootstrap_label(*args, **kwargs)
Render a label
Tag name:
bootstrap_label
Parameters:
content The label’s text
label_for The value that will be in the for attribute of the rendered <label>
label_class The CSS class for the rendered <label>
label_title The value that will be in the title attribute of the rendered <label>
Usage:
{% bootstrap_label content %}
Example:
4.7 bootstrap_button
bootstrap4.templatetags.bootstrap4.bootstrap_button(*args, **kwargs)
Render a button
Tag name:
bootstrap_button
Parameters:
content The text to be displayed in the button
button_type Optional field defining what type of button this is.
Accepts one of the following values:
• 'submit'
• 'reset'
4.6. bootstrap_label 13
django-bootstrap4 Documentation, Release 0.0.8
• 'button'
• 'link'
button_class The class of button to use. If none is given, btn-default will be used.
extra_classes Any extra CSS classes that should be added to the button.
size Optional field to control the size of the button.
Accepts one of the following values:
• 'xs'
• 'sm'
• 'small'
• 'md'
• 'medium'
• 'lg'
• 'large'
href Render the button as an <a> element. The href attribute is set with this value. If a
button_type other than link is defined, specifying a href will throw a ValueError
exception.
name Value of the name attribute of the rendered element.
value Value of the value attribute of the rendered element.
Usage:
{% bootstrap_button content %}
Example:
4.8 bootstrap_alert
bootstrap_alert
Parameters:
content HTML content of alert
alert_type
• 'info'
• 'warning'
• 'danger'
• 'success'
default 'info'
{% bootstrap_alert content %}
Example:
4.9 buttons
bootstrap4.templatetags.bootstrap4.bootstrap_buttons(parser, token)
Render buttons for form
Tag name:
buttons
Parameters:
submit Text for a submit button
reset Text for a reset button
Usage:
Example:
4.10 bootstrap_messages
bootstrap_messages
Parameters:
None.
4.9. buttons 15
django-bootstrap4 Documentation, Release 0.0.8
Usage:
{% bootstrap_messages %}
Example:
{% bootstrap_javascript jquery=True %}
{% bootstrap_messages %}
4.11 bootstrap_pagination
bootstrap4.templatetags.bootstrap4.bootstrap_pagination(page, **kwargs)
Render pagination for a page
Tag name:
bootstrap_pagination
Parameters:
page The page of results to show.
pages_to_show Number of pages in total
default 11
url URL to navigate to for pagination forward and pagination back.
default None
size Controls the size of the pagination through CSS. Defaults to being normal sized.
One of the following:
• 'small'
• 'large'
default None
{% bootstrap_pagination page %}
Example:
4.12 bootstrap_jquery_url
bootstrap4.templatetags.bootstrap4.bootstrap_jquery_url()
Tag name:
bootstrap_jquery_url
Example:
{% bootstrap_jquery_url %}
4.13 bootstrap_javascript_url
bootstrap4.templatetags.bootstrap4.bootstrap_javascript_url()
Return the full url to the Bootstrap JavaScript library
Default value: None
This value is configurable, see Settings section
Tag name:
bootstrap_javascript_url
Usage:
{% bootstrap_javascript_url %}
Example:
{% bootstrap_javascript_url %}
4.14 bootstrap_css_url
bootstrap4.templatetags.bootstrap4.bootstrap_css_url()
Return the full url to the Bootstrap CSS library
Default value: None
This value is configurable, see Settings section
Tag name:
bootstrap_css_url
Usage:
4.12. bootstrap_jquery_url 17
django-bootstrap4 Documentation, Release 0.0.8
{% bootstrap_css_url %}
Example:
{% bootstrap_css_url %}
4.15 bootstrap_css
bootstrap4.templatetags.bootstrap4.bootstrap_css()
Return HTML for Bootstrap CSS. Adjust url in settings. If no url is returned, we don’t want this statement to
return any HTML. This is intended behavior.
Default value: None
This value is configurable, see Settings section
Tag name:
bootstrap_css
Usage:
{% bootstrap_css %}
Example:
{% bootstrap_css %}
4.16 bootstrap_javascript
bootstrap4.templatetags.bootstrap4.bootstrap_javascript(jquery=False)
Return HTML for Bootstrap JavaScript.
Adjust url in settings. If no url is returned, we don’t want this statement to return any HTML. This is intended
behavior.
Default value: False
This value is configurable, see Settings section. Note that any value that evaluates to True and is not “slim” will
be interpreted as True.
Tag name:
bootstrap_javascript
Parameters:
jquery False|”slim”|True (default=False)
Usage:
{% bootstrap_javascript %}
Example:
{% bootstrap_javascript jquery="slim" %}
4.16. bootstrap_javascript 19
django-bootstrap4 Documentation, Release 0.0.8
Settings
# Default settings
BOOTSTRAP4 = {
"integrity": "sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/
˓→iRN3ewGhXQFZCSftd1LZCfmhktB",
"crossorigin": "anonymous",
},
"integrity": "sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/
˓→pTJ0euyQp0Mk8ck+5T",
"crossorigin": "anonymous",
},
# The complete URL to the Bootstrap CSS file (None means no theme)
"theme_url": None,
21
django-bootstrap4 Documentation, Release 0.0.8
"crossorigin": "anonymous",
},
"crossorigin": "anonymous",
},
"integrity": "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/
˓→l8WvCWPIPm49",
"crossorigin": "anonymous",
},
# Put JavaScript in the HEAD section of the HTML document (only relevant if you
˓→ use bootstrap4.html)
'javascript_in_head': False,
'include_jquery': False,
# Class to indicate success, meaning the field has valid input (better to set
˓→ this in your Django form)
'success_css_class': 'is-valid',
# Renderers (only set these if you have studied the source and understand the
˓→ inner workings)
'formset_renderers':{
'default': 'bootstrap4.renderers.FormsetRenderer',
},
(continues on next page)
22 Chapter 5. Settings
django-bootstrap4 Documentation, Release 0.0.8
23
django-bootstrap4 Documentation, Release 0.0.8
24 Chapter 5. Settings
CHAPTER 6
Templates
You can customize the output of django-bootstrap4 by writing your own templates. These templates are avail-
able:
6.1 bootstrap4/field_help_text_and_errors.html
6.2 bootstrap4/form_errors.html
6.3 bootstrap4/messages.html
25
django-bootstrap4 Documentation, Release 0.0.8
6.4 Other
26 Chapter 6. Templates
CHAPTER 7
Widgets
A form widget is available for displaying radio buttons as a Bootstrap 4 button group(https://getbootstrap.com/docs/4.
1/components/button-group/).
7.1 RadioSelectButtonGroup
This renders a form ChoiceField as a Bootstrap 4 button group in the primary Bootstrap 4 color.
class MyForm(forms.Form):
media_type = forms.ChoiceField(
help_text="Select the order type.",
required=True,
label="Order Type:",
widget=RadioSelectButtonGroup,
choices=((1, 'Vinyl'), (2, 'Compact Disc')),
initial=1,
)
27
django-bootstrap4 Documentation, Release 0.0.8
28 Chapter 7. Widgets
CHAPTER 8
Contributing
Contributions are welcome, and they are greatly appreciated! Every little bit helps, and credit will always be given.
You can contribute in many ways:
Look through the GitHub issues for bugs. Anything tagged with “bug” is open to whoever wants to implement it.
Look through the GitHub issues for features. Anything tagged with “feature” is open to whoever wants to implement
it.
29
django-bootstrap4 Documentation, Release 0.0.8
django-bootstrap4 could always use more documentation, whether as part of the official django-bootstrap4 docs, in
docstrings, or even on the web in blog posts, articles, and such.
3. Install your local copy into a virtualenv. Assuming you have virtualenvwrapper installed, this is how you set up
your fork for local development:
$ mkvirtualenv django-bootstrap4
$ cd django-bootstrap4/
$ pip install -r requirements.txt
$ python setup.py develop
To get flake8 and tox, just pip install them into your virtualenv.
6. Commit your changes and push your branch to GitHub:
$ git add .
$ git commit -m "Your detailed description of your changes."
$ git push origin name-of-your-bugfix-or-feature
30 Chapter 8. Contributing
django-bootstrap4 Documentation, Release 0.0.8
Before you submit a pull request, check that it meets these guidelines:
1. The pull request should include tests.
2. If the pull request adds functionality, the docs should be updated. Put your new functionality into a function
with a docstring, and add the feature to the list in README.rst.
3. The pull request should work for Python 2.6, 2.7, and 3.3, and for PyPy. Check https://travis-ci.org/dyve/
django-bootstrap4/pull_requests and make sure that the tests pass for all supported Python versions.
8.4 Tips
32 Chapter 8. Contributing
CHAPTER 9
Authors
9.2 Contributors
33
django-bootstrap4 Documentation, Release 0.0.8
34 Chapter 9. Authors
CHAPTER 10
History
10.1 Development
• Template tag bootstrap_field now allows 3 values for show_label: True, False / ‘sr-only’ and ‘skip’. In the case
of False / ‘sr-only’ the label is hidden but present for screen readers. When show_label is set to ‘skip’, the label
is not generated at all.
• Fix validation on input groups (#122)
35
django-bootstrap4 Documentation, Release 0.0.8
• First release
B
bootstrap_alert() (in module boot-
strap4.templatetags.bootstrap4), 14
bootstrap_button() (in module boot-
strap4.templatetags.bootstrap4), 13
bootstrap_buttons() (in module boot-
strap4.templatetags.bootstrap4), 15
bootstrap_css() (in module boot-
strap4.templatetags.bootstrap4), 18
bootstrap_css_url() (in module boot-
strap4.templatetags.bootstrap4), 17
bootstrap_field() (in module boot-
strap4.templatetags.bootstrap4), 11
bootstrap_form() (in module boot-
strap4.templatetags.bootstrap4), 9
bootstrap_form_errors() (in module boot-
strap4.templatetags.bootstrap4), 10
bootstrap_formset() (in module boot-
strap4.templatetags.bootstrap4), 10
bootstrap_formset_errors() (in module boot-
strap4.templatetags.bootstrap4), 11
bootstrap_javascript() (in module boot-
strap4.templatetags.bootstrap4), 18
bootstrap_javascript_url() (in module boot-
strap4.templatetags.bootstrap4), 17
bootstrap_jquery_url() (in module boot-
strap4.templatetags.bootstrap4), 17
bootstrap_label() (in module boot-
strap4.templatetags.bootstrap4), 13
bootstrap_messages() (in module boot-
strap4.templatetags.bootstrap4), 15
bootstrap_pagination() (in module boot-
strap4.templatetags.bootstrap4), 16
39