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

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. 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

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'``

layout
    Context value that is available in the template ``bootstrap4/form_errors.html`` as ``layout``.

Usage:

{% bootstrap_form_errors form %}

Example:

{% bootstrap_form_errors form layout='inline' %}

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:

{% bootstrap_formset formset layout='horizontal' %}

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:

{% bootstrap_formset_errors formset layout='inline' %}

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.

form_check_class
    CSS class of the ``div`` element wrapping the label and input when rendering checkboxes and radio buttons.

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 to ``horizontal``.

    :default: ``'col-md-3'``. Can be changed in :doc:`settings`

horizontal_field_class
    Class used on the field when the ``layout`` is set to ``horizontal``.

    :default: ``'col-md-9'``. Can be changed in :doc:`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 :doc:`settings`

required_css_class
    CSS class used on the ``div.form-group`` to indicate a field is required

    :default: ``''``. Can be changed :doc:`settings`

bound_css_class
    CSS class used when the field is bound

    :default: ``'has-success'``. Can be changed :doc:`settings`

Usage:

{% bootstrap_field field %}

Example:

{% bootstrap_field field show_label=False %}

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:

{% bootstrap_label "Email address" label_for="exampleInputEmail1" %}

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'``
        * ``'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. 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:

{% bootstrap_button "Save" button_type="submit" button_class="btn-primary" %}

bootstrap_alert

bootstrap4.templatetags.bootstrap4.bootstrap_alert(content, alert_type='info', dismissible=True)

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='danger' %}

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:

{% buttons %}{% endbuttons %}

Example:

{% buttons submit='OK' reset="Cancel" %}{% endbuttons %}

bootstrap_messages

bootstrap4.templatetags.bootstrap4.bootstrap_messages(context, *args, **kwargs)

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

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``

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" %}

Tip:

If you want to repeat the query string arguments in subsequent pagination links,
use the "extra" parameter with "request.GET.urlencode":

  {% bootstrap_pagination page_obj extra=request.GET.urlencode %}

bootstrap_jquery_url

bootstrap4.templatetags.bootstrap4.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

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 %}

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:

{% bootstrap_css_url %}

Example:

{% bootstrap_css_url %}

bootstrap_css

bootstrap4.templatetags.bootstrap4.bootstrap_css()

Return HTML for Bootstrap CSS. If no CSS url is available, return empty string.

Default value: None

This value is configurable, see Settings section

Tag name:

bootstrap_css

Usage:

{% bootstrap_css %}

Example:

{% bootstrap_css %}

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" %}