Template tags and filters¶
Note
In each of the following examples it is understood that you have already loaded the bootstrap4
template tag library, placing the code below at the beginning of each template in which the bootstrap4
template tag library will be used. Read the Installation and Quickstart sections to understand how
to accomplish this.
bootstrap_form¶
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. exclude=subject,bcc
- alert_error_type
Control which type of errors should be rendered in global form alert.
One of the following values:
'all'
'fields'
'non_fields'
- default
'non_fields'
See bootstrap_field for other arguments
Usage:
{% bootstrap_form form %}
Example:
{% bootstrap_form form layout='inline' %}
bootstrap_form_errors¶
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'
- layout
Context value that is available in the template
bootstrap4/form_errors.html
aslayout
.
Usage:
{% bootstrap_form_errors form %}
Example:
{% bootstrap_form_errors form layout='inline' %}
bootstrap_formset¶
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:
{% bootstrap_formset formset layout='horizontal' %}
bootstrap_formset_errors¶
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
aslayout
.
Usage:
{% bootstrap_formset_errors formset %}
Example:
{% bootstrap_formset_errors formset layout='inline' %}
bootstrap_field¶
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 nofield_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 havecontrol-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'
- default
True
- exclude
A list of field names that should not be rendered
- size
Controls the size of the rendered
div.form-group
through the use of CSS classes.One of the following values:
'small'
'medium'
'large'
- placeholder
Sets the placeholder text of a textbox
- horizontal_label_class
Class used on the label when the
layout
is set tohorizontal
.- default
'col-md-3'
. Can be changed in Settings
- horizontal_field_class
Class used on the field when the
layout
is set tohorizontal
.- default
'col-md-9'
. Can be changed in Settings
- addon_before
Text that should be prepended to the form field. Can also be an icon, e.g.
'<span class="glyphicon glyphicon-calendar"></span>'
See the Bootstrap docs <http://getbootstrap.com/components/#input-groups-basic> for more examples.
- addon_after
Text that should be appended to the form field. Can also be an icon, e.g.
'<span class="glyphicon glyphicon-calendar"></span>'
See the Bootstrap docs <http://getbootstrap.com/components/#input-groups-basic> for more examples.
- addon_before_class
Class used on the span when
addon_before
is used.One of the following values:
'input-group-text'
None
Set to None to disable the span inside the addon. (for use with buttons)
- default
input-group-text
- addon_after_class
Class used on the span when
addon_after
is used.One of the following values:
'input-group-text'
None
Set to None to disable the span inside the addon. (for use with buttons)
- default
input-group-text
- error_css_class
CSS class used when the field has an error
- default
'has-error'
. Can be changed Settings
- required_css_class
CSS class used on the
div.form-group
to indicate a field is required- default
''
. Can be changed Settings
- bound_css_class
CSS class used when the field is bound
- default
'has-success'
. Can be changed Settings
Usage:
{% bootstrap_field field %}
Example:
{% bootstrap_field field show_label=False %}
bootstrap_label¶
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:
{% bootstrap_label "Email address" label_for="exampleInputEmail1" %}
bootstrap_button¶
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'
'button'
'link'
- button_class
The class of button to use. If none is given, btn-primary 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. Thehref
attribute is set with this value. If abutton_type
other thanlink
is defined, specifying ahref
will throw aValueError
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:
{% bootstrap_button "Save" button_type="submit" button_class="btn-primary" %}
bootstrap_alert¶
Render an alert.
Tag name:
bootstrap_alert
Parameters:
- content
HTML content of alert
- alert_type
'info'
'warning'
'danger'
'success'
- default
'info'
- dismissible
boolean, is alert dismissible
- default
True
Usage:
{% bootstrap_alert content %}
Example:
{% bootstrap_alert "Something went wrong" alert_type='error' %}
buttons¶
Render buttons for form.
Tag name:
buttons
Parameters:
- submit
Text for a submit button
- reset
Text for a reset button
Usage:
{% buttons %}{% endbuttons %}
Example:
{% buttons submit='OK' reset="Cancel" %}{% endbuttons %}
bootstrap_messages¶
Show django.contrib.messages Messages in Bootstrap alert containers.
In order to make the alerts dismissible (with the close button), we have to set the jquery parameter too when using the bootstrap_javascript tag.
Uses the template
bootstrap4/messages.html
.Tag name:
bootstrap_messages
Parameters:
None.
Usage:
{% bootstrap_messages %}
Example:
{% bootstrap_javascript jquery=True %} {% bootstrap_messages %}
bootstrap_pagination¶
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
- extra
Any extra page parameters.
- default
None
- parameter_name
Name of the paging URL parameter.
- default
'page'
Usage:
{% bootstrap_pagination page %}
Example:
{% bootstrap_pagination lines url="/pagination?page=1" size="large" %}
bootstrap_jquery_url¶
Return url to full version of jQuery.
Tag name:
bootstrap_jquery_url
Return the full url to jQuery plugin to use
Default value:
https://code.jquery.com/jquery-3.2.1.min.js
This value is configurable, see Settings section
Usage:
{% bootstrap_jquery_url %}
Example:
{% bootstrap_jquery_url %}
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 %}
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:
{% bootstrap_css_url %}
Example:
{% bootstrap_css_url %}
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 %}
bootstrap_javascript¶
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" %}