django-crispy-forms / crispy-bootstrap5

Bootstrap5 template pack for django-crispy-forms

crispy-bootstrap5

Bootstrap5 template pack for django-crispy-forms

Installation

Install this plugin using pip:

$ pip install crispy-bootstrap5

Usage

You will need to update your project's settings file to add crispy_forms and crispy_bootstrap5 to your projects INSTALLED_APPS. Also set bootstrap5 as and allowed template pack and as the default template pack for your project

INSTALLED_APPS = (
    ...
    "crispy_forms",
    "crispy_bootstrap5",
    ...
)

CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"

CRISPY_TEMPLATE_PACK = "bootstrap5"

What's new?

Bootstrap 5 introduces floating labels. This template pack include a layout object to use this input type

from crispy_bootstrap5.bootstrap5 import FloatingField

# then in your Layout
... Layout(
    FloatingField("first_name"),
)

Accordions also have new features, such as Accordion flush and Always open. There is a new layout object to use them

from crispy_bootstrap5.bootstrap5 import BS5Accordion

# then in your Layout
# if not informed, flush and always_open default to False
... Layout(
    BS5Accordion(
        AccordionGroup("group name", "form_field_1", "form_field_2"),
        AccordionGroup("another group name", "form_field"),
        flush=True,
        always_open=True
    )
)

Support is added for Switches. Switches are a custom checkbox rendered as a toggle switch. The widget for these fields should be a CheckboxInput.

from crispy_bootstrap5.bootstrap5 import Switch

... Layout(Switch("is_company"))

Development

To contribute to this library, first checkout the code. Then create a new virtual environment:

cd crispy-bootstrap5
python -mvenv venv
source venv/bin/activate

Or if you are using pipenv:

pipenv shell

Now install the dependencies and tests:

pip install -e '.[test]'

To run the tests:

pytest

crispy-bootstrap5's Issues

Add classifiers

Add some classifiers to setup.py showing supported django and python versions, and so on.

Default mb-3 in field.html may cause problems

I'm talking about default behavior of creating div with class='mb-3' on every form field, which is convenient in many cases, but in my case it was a huge problem, since my form was in navbar, and i simple didnt need so big interval to bottom border. I haven't found acceptable solution (one idea i had is to overwrite field.html file and i decided to avoid it), and that leaded me to style this form without crispy. Everything else is great by the way.

Name conflict with "tag"

I have a model "Tag" in my Django app. I tried to used crispy-bootstrap5 for its CreateView and UpdateView but I was seeing weird behavior on my form result. It got html tags with my "Tag" title! Something like

<SampleTag>
    ... actual correct form fields
</SampleTag>

I debugged it and found that the cause lies in field.html template.

<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_...

I can change my context_object_name to something else but I think "tag" is a very common name and the library should use some prefixing in its context variables like "bs_tag" or "crispy_tag" to avoid conflict.

Modal template is missing

crispy has a Modal class, and templates for bs3, and bs4, but in bootstrap5 the layouts/modal.html is missing.

Is that because nobody did it until now, or by design? Was id abandoned?

Fix test : test_multiplecheckboxes

prepend append bug

The prepend and append are broken with alpha 2. It's most obvious on non-standard input sizes

Clearable File Field

#15 Used the new bootstrap 5 file inputs. However Django's clearable file inputs are more complex, and therefore this template pack currently reverts to Django's own rendering for this.

For Bootstrap 4 we managed to find a decent solution. To investigage it something like that can be replicated here.

Error Boolean Bug

A boolean field with errors doesn't show them

Fix test: test_label_class_and_field_class_bs5

Missing support for "Readonly plain text"

There is a missing support for Readonly plain text.
It's possible to put a class form-control-plaintext to the Field manually, but class form-control (or form-select for <select>) persists, which is wrong.

Help text template needs minor changes

Template layout/help_text.html:

{% if field.help_text %}
    {% if help_text_inline %}
        <span id="hint_{{ field.auto_id }}" class="text-muted">{{ field.help_text }}</span>
    {% else %}
        <small id="hint_{{ field.auto_id }}" class="form-text text-muted">{{ field.help_text }}</small>
    {% endif %}
{% endif %}

With Bootstrap 5, .form-text no longer sets the display property; therefore both help labels should use .form-text, but different tags (span for inline, div for block) or .d-* modifier classes.

Furthermore, .form-text applies $form-text-color, which defaults to $text-muted; therefore, .text-muted may be omitted.

Integrate with django-crispy-forms?

Hello, why is this a separate package and is not integrated with the django-crispy-forms package ? Is it because bootstrap 5 is still in beta ?

Current Status

For anyone watching 👋

Here's what it currently looks like.

https://kind-torvalds-1993bc.netlify.app/

EDIT :
Updated post first batch of fixes -- 9th Nov

EDIT2:
Updated for today's fixes -- 17th Nov (File field + field labels)

'optgroups' error displaying ManyToMany field as checkboxes

First time poster, so let me know if this is not the appropriate place for this. :) I've posted on Django Forum and was directed to file an issue here.

I’m attempting to display records from a Many-to-Many field relationship in a ModelForm.

When I load my page/template in the browser, I see the following error:

File "...path here.../lib/python3.9/site-packages/django/template/base.py", line 569, in find_filter
    raise TemplateSyntaxError("Invalid filter: '%s'" % filter_name)
django.template.exceptions.TemplateSyntaxError: Invalid filter: 'optgroups'

treatment_goal field in models.py
treatment_goal = models.ManyToManyField(MyObjective)

MyObjective in models.py (obviously pared down for simplicity)

class MyObjective(TheBaseClass):
    client = models.ForeignKey(Client, on_delete=models.CASCADE)
    objective = models.CharField(max_length=300, default='')

    def __str__(self):
        return str(self.objective)

form in forms.py

class MyForm(ModelForm):
	class Meta:
		model = MyModel
		widgets = {
			'treatment_goal': widgets.CheckboxSelectMultiple
		}

	def __init__(self, *args, **kwargs):
		super().__init__(*args, **kwargs)
		self.helper = FormHelper()
		self.helper.layout = Layout(
			Fieldset('',
				'treatment_goal',
                        )
                )

If I don’t use the widgets.CheckboxSelectMultiple code, it renders the field as a Multi-Select field and works fine. But the moment I add the CheckboxSelectMultiple code, it gives the error.

The widgets.CheckboxSelectMultiple code is working fine in another location on forms.py for a field that looks like this in models.py:
communication_prefs = MultiSelectField(choices=CommunicationPref.choices, blank=True, default='')

If it helps, CommunicationPref.choices looks like this in models.py:

class CommunicationPref(models.TextChoices):
    PHONE = 'Phone', _('Phone')
    TEXT = 'Text', _('Text')
    EMAIL = 'Email', _('Email')

Again, that is an example of where it is working.

Ultimately, I think the error is indicating that the template being used by crispy-bootstrap5 (radio_checkbox_select.html) does not like the values that are coming back from the ManyToMany field, possibly? The values coming back from the ManyToMany field are a short sentences (strings) as shown in MyObjective code above.

This is the radio_checkbox_select.html file being called:
https://github.com/django-crispy-forms/crispy-bootstrap5/blob/main/crispy_bootstrap5/templates/bootstrap5/layout/radio_checkbox_select.html

Hope that helps explain the issue!

Extra space added when rendering checkboxes with labels

In field.html template, when rendering a checkbox with form_show_labels, the mb-3 class is present twice (here and here)

Because of this duplicate mb-3 classes, checkbox fields have more space at the bottom than other fields.

The second mb-3 should be removed for consistent rendering with other fields (the same way the duplicated "row" class was removed in https://github.com/django-crispy-forms/crispy-bootstrap5/pull/83/files#diff-9ffc7ba2df774d7f6f3de63e6d8c32576620d52105dcf1d0683ed5f03bfdd4a6)

This line should be replaced by
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if field|is_checkbox and form_show_labels %}form-check{% else %}mb-3{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">

Floating labels -- Alpha 3

Alpha 3 adds floating labels --
https://v5.getbootstrap.com/docs/5.0/forms/floating-labels/

Think this needs a small template change and then some docs to explain how to add the extra class.

• Add class via wrapper_class="form-floating"

• Can this line be moved up above the label -- that is the label and input sit along side each other within the same div? 🤔

crispy-bootstrap5/crispy_bootstrap5/templates/bootstrap5/field.html

Line 41 in 856b7db

<div class="{{ field_class }}">

Will crispy-bootstrap5 depend on django-crispy-forms in the future?

In the usage area it says that django-crispy-forms must also be installed. Is it planned in the future that only one app needs to be installed if you want to use crispy-bootstrap5?

Will the crispy-bootstrap5 project still be maintained?

FieldWithButtons space issue

I had a problem with my FieldWithButtons and found out that it was coming from the field_with_buttons.html file.
In the definition of the classes of the field div, there's no space between the div part and the class=... one, so that results in incorrect code with elements named <divclass=...></divclass=...>. I just added a space and that solved the issue.

From : <div{% if field_class %}class="{{ field_class }}"{% endif %}> ...</div>

To : <div{% if field_class %} class="{{ field_class }}"{% endif %}>...</div>

add script to external script file to handle SCP

Hi, I am currently using bootstrap 5 imports with crispyforms bootstrap4 template, and everything is just about working fine.

However, I am having problems with the file input as it has an inline script attached to it, and Content Security Protection is complaining in Chrome that it can't load that inline script without me relaxing CSP rules. To overcome this, I wonder if the bootstrap 5 template pack could be accompanied by an external script file, to handle cases like the file field.

Btw, did you get anywhere with the floating field? I have a desire to upgrade my web app to bootstrap5 crispy forms template, but I am worried that a whole load of functionality is going to be missing, like floating fields and file inputs.

Items and help needed for a new release?

I wondered about the plans for a new release and what help might be needed to make it happen? There was some talk about beefing up the documentation for the next release, but I'm unsure what needs to be done since I found everything I needed in the docs.

crispy-bootstrap5 with pyinstaller

Dear all,

Basically I need compile and run django with crispy_forms and crispy_bootstrap5 in a single exe file so I used pyinstaller to compile all the python codes into an executable.

crispy_bootstrap5 was totally fine before compiling but after compiled it seems unable to find the template at bootstrap5/uni_form.html. All variables like CRISPY_ALLOWED_TEMPLATE_PACKS, CRISPY_TEMPLATE_PACK and INSTALLED_APPS has been added.

The problem at page (blank out is my app name):

In pyinstaller spec file there is a section to allow adding data files (i.e. html) path so that the compiled exe will include these htmls. Does anyone know the path to all bootstrap5 htmls are?

Thanks.

Inline checkbox error bug

The hack from bootstrap4 no longer works

Adding an input using a helper generates an unrequired label

# forms.py
class UserForm(forms.ModelForm):
    class Meta:
        model = User
        fields = ["job_title"]

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.label_class = "bg-primary p-2 text-white"
        self.helper.form_method = "post"
        self.helper.form_action = "start"
        self.helper.add_input(
            Submit("submit", "Submit", css_class="btn btn-warning text-white")
        )

<!-- html output -->
<div id="div_id_job_title" class="mb-3">
  <label for="id_job_title" class="form-label bg-primary p-2 text-white">Job title</label>
  <div>
    <input type="text" name="job_title" maxlength="128" class="textinput textInput form-control" id="id_job_title">
  </div>
</div>

<div class="mb-3">
  <div class="aab bg-primary p-2 text-white"></div>
  <div class="">
    <input type="submit" name="submit" value="Submit" class="btn btn-primary btn btn-warning text-white" id="submit-id-submit">
  </div>
</div>

As you can see, when adding an input/submit button an unrequired label is generated.

I'll try to create a PR if I can find the bug later on today

Inline fields don't seem to display correctly

I was able to fix it by overriding the template bootstrap5/layout/inline_field.html with the following.

{% load crispy_forms_field %}

{% include 'bootstrap5/field.html' with label_class='visually-hidden' %}

New accordion

Alpha 3 has a new accordion. Will need to review for this.

https://blog.getbootstrap.com/2020/11/11/bootstrap-5-alpha-3/

Improve select: missing "arrow down"

Using crispy-bootstrap5 a <select> is generated like this:

<select name="person_form-academic_title" class="select form-control" ...

It renders like this (notice the missing "arrow down"):

If it did class="form-select"as per https://getbootstrap.com/docs/5.0/forms/select/ it would look like:

Side note: on Bootstrap5 will look nicer than what we have using Bootstrap4:

Bootstrap 5 set selected option value

• Package version: 1.14.0
• Django version: 4.0.2
• Python version: 3.10.2
• Template pack: (Optional) crispy-bootstrap5==0.6

Description:

I think by default, bootstrap selected option doesn't have value attribute. Is there anyway we can add it via this?

Or I have to create JavaScript function to add that?

Preferably also include:

• [ x ] Example Django Crispy Forms code
• [ ] Screenshots
• [ x ] Actual HTML generated
• [ x ] Expected HTML

Django code

class RandomChoices(models.TextChoices):
    DEFAULT = "", _("---")
    A = "A", _("A")
    B = "B", _("B")


class RandomForm(forms.Form):
    random = forms.ChoiceField(
        choices=RandomChoices.choices,
        required=False,
    )

Template

<div class="mb-3">
    <h3 class="h6 mb-2">Random choice</h3>
    {{ random|add_class:"form-select form-select-sm mb-2" }}
</div>

Generated HTML

<select class="form-select form-select-sm mb-2" id="id_random" name="random">
    <option selected="">---</option>
    <option value="A">A</option>
    <option value="B">B</option>
</select>

Expected HTML

<select class="form-select form-select-sm mb-2" id="id_random" name="random">
    <option value="" selected>---</option>
    <option value="A">A</option>
    <option value="B">B</option>
</select>

prepended/appended text ignores HTML content

according to the docs, one should be able to include HTML (icons etc) in a prepended/appended text if an input. It's possible in bootstrap3 what I saw, and missing in BS5 component here.
So I added the |safe filters - please check it. But it should be safe ;-)

Checkbox in horizontal form

I have got some issue to align a single checkbox in a horizontal form.
I think "col-sm-offset-3" should be "offset-sm-3" (it work when i change it in the navigateur) like in the Boostrap documentation, but i don't know how to change it in crispy-forms template...
Thanks in advance

Zero index checkbox and radio in bootstrap templates

We should mirror the change made in core. See - django-crispy-forms/django-crispy-forms#1141

form-horizontal

form-horizontal logic is still in the templates but that doesn't appear to be the right thing to do in bs5?

the tags are escaped in the label

Hello,
It seems that the fields are escaped in the label when we add tags with crispy-bootstrap5 I do not have the problem with crispy bootstrap4
example:

escaped in template 5
forms.CheckboxInput(attrs={'class': 'form-check-input'}),label= f"{_('I have read and agree to the')} <a href=\"#\">...}

no escaped in template 4

field_class applied two times for field_file

in field.html if field_class property is set, inputs are wrapped in a div with field_css as css attribute:

{% if field_class %}<div class="{{ field_class }}">{% endif %}
    {% if field|is_file %}
        {% include 'bootstrap5/layout/field_file.html' %}
    {% elif field|is_select %}
...

and in field_file.html all thing are wrapped in a div with css class as field_css

<div class="{{ field_class }} mb-2">
...

which results in nested divs with duplicate css like this:

<div class="col-12 col-md-9"> 
    <div class="col-12 col-md-9 mb-2"> 
        <div> <input type="file" name="icon" class="form-control" accept="image/*" id="id_icon"> </div>
    </div>
</div>

Unfortunately this ruins the UI and file input becomes shorter than other fields.

Is this intended? If not, what can I do except overriding field_file.html?

Help text not rendering as "safe"

The bootstrap4 template within crispy forms allows embedded HTML within help text. This simplifies bolding texts and whatnot. crispy-bootstrap5 does not appear to follow the same convention.

Issue example

Alert template need minor changes

Template layout/alert.html:

<div{% if alert.css_id %} id="{{ alert.css_id }}"{% endif %}{% if alert.css_class %} class="{{ alert.css_class }}"{% endif %}>
    {% if dismiss %}<button type="button" class="close" data-dismiss="alert">&times;</button>{% endif %}
    {{ content|safe }}
</div>

Example from Bootstrap 5 docs:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Observations:

• If dismiss is True, the div should probably also have alert-dismissible (as well as fade and show) classes? Or is this intended and these classes should be added to the css_class keyword of Alert’s constructor?
• The Close button still uses Bootstrap 4 markup. With Bootstrap 5, the close button’s class should be btn-close (instead of close), data-dismiss="…" should be data-bs-dismiss="…", and button should not have any content (x-mark is a SVG image added via CSS)
• While the button tag is placed below the alert’s content in the Bootstrap example, placing the button tag above the content also seems to work.

Multi-radio and multi-checkbox widgets in horizontal forms have misaligned labels

Sample generated markup to reproduce (different from picture, sorry):

<form class="form-horizontal" method="post"> <input type="hidden" name="csrfmiddlewaretoken" value="b7xyaKUsGHCUy0pOVrhtdEONLeKeOHvUmqhSvrCM9o60F85XUcxoOKgT41uaVE9J"> <div id="div_id_choice" class="mb-3 row"> <label class="col-form-label col-lg-2">
                Select all that apply:
            </label> <div class="col-lg-8"> <div class="form-check"> <input type="checkbox" class="form-check-input" name="choice" value="0" disabled="" id="id_choice_0" checked=""> <label for="id_choice_0" class="form-check-label">
            Sprinkles
        </label> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" name="choice" value="1" disabled="" id="id_choice_1" checked=""> <label for="id_choice_1" class="form-check-label">
            Chocolate chunks
        </label> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" name="choice" value="2" disabled="" id="id_choice_2"> <label for="id_choice_2" class="form-check-label">
            Vacuum cleaner dust
        </label> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" name="choice" value="3" disabled="" id="id_choice_3"> <label for="id_choice_3" class="form-check-label">
            Spider webs
        </label> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" name="choice" value="4" disabled="" id="id_choice_4" checked=""> <label for="id_choice_4" class="form-check-label">
            Almond bits
        </label> </div> </div> </div> </form>

Generated with 2b1a014.

This seems to be an issue with Bootstrap 5, as mentioned in the docs:

At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the padding-top on our stacked radio inputs label to better align the text baseline.

I.e. the suggested fix seems to be to add a pt-0 to the label in this situation.

Fix checkbox in table_inline_formset

Checkboxes are not rendering correctly in formsets using the table_inline_formset.html template.

Current behavior:

Expected behavior:

Note that some checkboxes are actually checked on the first image. The issue seems to be on the field.html template. Will investigate this further and possibly propose a PR

TemplateDoesNotExist - bootstrap5/multifield.html

I'm not sure if it's an error in my template setup as I can't believe it's an actual bug, but it can't seem to find the template for the MultiField() help but all the other functions seem to work.

Example code:

Layout( 'Basic details', 'name', Field('description', rows=2), MultiField('default', 'active') )

Template-loader postmortem

Using engine django:
...
- django.template.loaders.app_directories.Loader: /<snip>/venv/lib/python3.9/site-packages/crispy_forms/templates/bootstrap5/multifield.html (Source does not exist)
- django.template.loaders.app_directories.Loader: /<snip>/venv/lib/python3.9/site-packages/crispy_bootstrap5/templates/bootstrap5/multifield.html (Source does not exist)

Overwrite Templates for my project

Hello 👋🏼

Thanks for creating this package! ❤️

How could I overwrite the crispy-forms templates for my project if I installed it with pip?

Thanks a lot!

fix test test_file_field

Horizonal checkbox

It seems with the following

self.helper.form_class = "form-horizontal"
self.helper.label_class = "col-lg-2"
self.helper.field_class = "col-lg-8"

I am getting a weird output for BooleanFields

Cache issue ?

Hi

I just upgraded my app from crispy-bootstrap4 to crispy-bootstrap5 and I am encountering caching issues, where users need to clear their cache (i.e. Shift-CTRL-R, once) in order for the pages to load properly following the update. I was very surprised because I do cache busting for all of my css/js libraries, mostly through offline compression with Django-compress but also through library versioning where the versions number is included in the library's URL.

So my question is : does crispy-bootstrap5 have its own cache layer ? If so, is it different from crispy-bootstrap4 ?

Thanks for any help !

File Field Bug

The custom file input looks ok, but doesn't update the name.

Suspect we can bring in the bootstrap4 file field which has fixed this.

Add support for accordion-flush

Bootstrap5 introduced "accordion-flush" html class, which basically removes borders and rounding from accordions.

This could be added by creating an AccordionFlush python class at bootstrap.py and an accordion-flush.html layout.

Alternatively, the Accordion python class could be modified in order to accept an optional "accordion-flush" css class on the template, since it's the only difference from a standard accordion. I think this solution might be the more elegant one.

I'll try to work it out and propose a PR

Inline forms tuning

I tried to render an "inline form" with Django, as displayed here:
https://getbootstrap.com/docs/5.1/forms/layout/#column-sizing

I ended up having to use a bunch of weird workarounds to make it look okay:

        self.helper.layout = Layout(
            # One label for both date controls
            Div(HTML(f'<label class="col-form-label">{date_filter_label}</label>'), css_class="col-auto mb-3"),
            Field("date_after", wrapper_class="col-auto"),
            Div(HTML("-"), css_class="mb-3 col-auto"),
            Field("date_before", wrapper_class="col-auto"),
            Div("detailed", css_class="col-auto"),
            Div(Submit("submit", _("Display")), css_class="mb-3 col-auto"),
        )

I am fairly new to Crispy to I might have approached it wrong, but what I did notice is that:

• every field is wrapper in a mb-3, so I had to fix that in some other divs
• wrapper_class did not work for checkbox, because it's being wrapper in another div with mb-3

This is now the result

<form class="row gy-3 align-items-center" method="post">
  <!-- This mb-3 I don't want, but I had to to make it aligned with the rest. -->
  <div class="col-auto mb-3">
    <label class="col-form-label">Date range</label>
  </div>
  <!-- This mb-3 I don't want, but it's in the field template -->
  <div id="div_id_date_after" class="mb-3 col-auto">
    <input type="text" name="date_after" value="12/11/2021" class="dateinput form-control" required="" id="id_date_after">
  </div>
  <div class="mb-3 col-auto">
    -
  </div>
  <!-- This mb-3 I don't want, but it's in the field template -->
  <div id="div_id_date_before" class="mb-3 col-auto">
    <input type="text" name="date_before" value="12/12/2021" class="dateinput form-control" required="" id="id_date_before">
  </div>
  <!-- Here we see another mb-3 class wrapper around my checkbox. Not needed. -->
  <div class="col-auto">
    <div class="mb-3">
      <div id="div_id_detailed" class="mb-3">
        <input type="checkbox" name="detailed" class="checkboxinput form-check-input" id="id_detailed">
        <label for="id_detailed" class="form-check-label">
          Detailed
        </label>
      </div>
    </div>
  </div>
  <!-- Here I also had to manually add the mb-3 to fix the alignment -->
  <div class="mb-3 col-auto">
    <input type="submit" name="submit" value="Display" class="btn btn-primary" id="submit-id-submit">
  </div>
</form>

Did I do something wrong to accomplish this inline form, or does the template need a bit of love to work with Bootstrap5 :)

CSP issues

I am trying to make my django project, which is using crispy_bootstrap5, as tight as possible wrt CSP.
However, I noticed one CSP problem inside crispy_forms, which tracks down to a template in crispy_bootstrap5.

In templates/bootstrap5/layout/field_file.html

    <div class="form-control d-flex h-auto">
        <span class="text-break" style="flex-grow:1;min-width:0">
            <a href="{{ field.value.url }}">{{ field.value.name }}</a>

you use an inline-style, which is strongly would require the strongly discouraged CSP Option:
style-src = 'unsafe-inline'

An alternative to fix this would be to replace the explicit style attribute by an extended class="text-break flex-grow-1" or similar.

Would it be possible to consider this, so that web pages using crispy_forms can be made more secure?

Thanks for the consideration

Demo Page

Update demo page of current status. Could be nice to add this link to readme

Add support for Switches

I think it would awesome to incorporate the new Switches as a field type. Ideally it could have a means to override all checkboxes in one go.

https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches

Hack to including bootstrap5 template in crispy-forms

Would love to know if I've missed a better way to do this:

• crispy-forms and crispy-bootstrap5 installed

In order to use the bootstrap5 template, however, I had to so this in my Django's settings.py file:

CRISPY_ALLOWED_TEMPLATE_PACKS = '../../crispy_bootstrap5/templates/bootstrap5'
CRISPY_TEMPLATE_PACK = '../../crispy_bootstrap5/templates/bootstrap5'

If I specify them as just this:

CRISPY_ALLOWED_TEMPLATE_PACKS = 'bootstrap5'
CRISPY_TEMPLATE_PACK = 'bootstrap5'

I get this:

TemplateSyntaxError at /accounting/received_statement
crispy tag's template_pack argument should be in ('bootstrap', 'uni_form', 'bootstrap3', 'bootstrap4')

Bootstrap5 clearable file input

Hi, I wonder if there should be a field for the bootstrap 5 file input, which has changed since bootstrap 4 to not require the use of javascript, it seems (which helps with CSP), and can be presented in two different forms, small, or large.

https://getbootstrap.com/docs/5.0/forms/form-control/#file-input

I currently have a custom field input, as I am importing bootstrap5 but using crispy bootstrap4. It is the bootstrap4 code, only without the javascript, which is now unnecessary.

{% load crispy_forms_field %}

<div class="{{ field_class }} mb-2">
{% for widget in field.subwidgets %}
{% if widget.data.is_initial %}
<div class="input-group mb-2">
    <div class="input-group-prepend">
        <span class="input-group-text">{{ widget.data.initial_text }}</span>
    </div>
    <div class="form-control d-flex h-auto">
        <span class="text-break" style="flex-grow:1;min-width:0">
        <a href="{{ field.value.url }}">{{ path }}</a>
        </span>
        {% if not widget.data.required %}
        <span class="align-self-center ml-2">
            <span class="custom-control custom-checkbox">
                <input type="checkbox" name="{{ widget.data.checkbox_name }}" id="{{ widget.data.checkbox_id }}" class="custom-control-input"{% if field.field.disabled %} disabled{% endif %} >
                <label class="custom-control-label mb-0" for="{{ widget.data.checkbox_id }}">{{ widget.data.clear_checkbox_label }}</label>
            </span>
        </span>
        {% endif %}
    </div>
</div>
<div class="input-group mb-0">
{% endif %}
    <div class="custom-file{% if field.errors %} is-invalid{%endif%}">
        <label class="custom-file-label text-truncate" for="{{ field.id_for_label }}"></label>
        <input type="{{ widget.data.type }}" name="{{ widget.data.name }}" class="custom-file-input{% if widget.data.attrs.class %} {{ widget.data.attrs.class }}{% endif %}{% if field.errors %} is-invalid{%endif%}"{% if field.field.disabled %} disabled{% endif %}{% for name, value in widget.data.attrs.items %}{% if value is not False and name != 'class' %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %}>
    </div>
    {% if not widget.data.is_initial %}
    {% include 'bootstrap4/layout/help_text_and_errors.html' %}
    {% endif %}
{% if widget.data.is_initial %}
</div>
<div class="input-group mb-0">
{% include 'bootstrap4/layout/help_text_and_errors.html' %}
</div>
{% endif %}
{% endfor %}
</div>

I am able to instantiate this custom field currently using the following (note the bootstrap5 form-control-lg):

            FileClearInput('image_file', css_class="tinfo form-control form-control-lg"),