Display bootstrap element in django-forms

Using Django Templates & Frontend
1

I want to use an element of a bootstrap template in my django-form:

Desired element

It’s html code looks like this:

HTML code of the element

What approach should I take to load this element in my form using django?

So far I have tried this:

1.- Define field:

CHOICES = [('1', 'First'), ('2', 'Second')]
selector = forms.ChoiceField(
        required=False,
        label= "Select software products",
        choices=CHOICES,
        widget = forms.TextInput(
            attrs= {
                'class': 'choices',
                'role': 'combobox',
                'data-type': 'select-multiple'
            }
        )
    )

2.- Add to layout:

self.helper.layout = Layout(
    Row(Div(Div('selector'), css_class='form-group'))
)

The result is a regular input field:

Result

In other elements I just put the css class and it works perfectly but I can’t figure out how to do it in more complex objects.

Thank you in advance!!

2

You may want to create a custom template for that widget - it’s likely going to be easier than trying to force-create a set of nested divs in crispy with different class attribute settings.

This recent post may provide you with some ideas - Customize how ModelForm renders ImageField?

3 Likes