While creating forms for my app I had to make a custom checkbox (I am terrible with css so this was not easy). I got it to work and it looks like this when I create the form manually:

The manual html is

<div class="checkbox icheck-primary"> {{ form.active }} <label for="id_active">Active</label> </div>

But when using the wrapper_class attribute on a crispy forms Field it displays as standard:

And the crispy forms code:

self.helper.layout = Layout( Fieldset( 'Add Contact', 'first_name', Field('active', wrapper_class='icheck-primary', css_class='icheck-primary') ))

I tried using a custom Div template but I couldn't get it to work. In the docs all I could find was the wrapper_class .

Am I missing something simple or could someone point me in the right direction?

[Edit] HTML output from crispy_forms :

<div id="div_id_active" class="checkbox icheck-primary"> <label for="id_active" class=""> <input name="active" class="checkboxinput" id="id_active" checked="" type="checkbox"> Active </label> </div>

And here is my manual/forms generated html

<div class="checkbox icheck-primary"> <input name="stay_logged_in" class="checkbox icheck-primary" id="id_stay_logged_in" type="checkbox"> <label for="id_stay_logged_in">Remember me</label> </div>

[Edit 2] This is a sample of the css selectors