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)[source]

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)[source]

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)[source]

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)[source]

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)[source]

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'

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 Settings

horizontal_field_class

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

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

bootstrap4.templatetags.bootstrap4.bootstrap_label(*args, **kwargs)[source]

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)[source]

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)[source]

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

bootstrap4.templatetags.bootstrap4.bootstrap_buttons(parser, token)[source]

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)[source]

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)[source]

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

bootstrap4.templatetags.bootstrap4.bootstrap_jquery_url()[source]

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()[source]

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()[source]

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()[source]

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

bootstrap4.templatetags.bootstrap4.bootstrap_javascript(jquery=False)[source]

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