Displaying multiple Rows and Columns in django-crispy-forms

Question

I'm using django-crispy-forms with Twitter Bootstrap , and I'm having some issues with customizing my forms into multiple rows and columns. One example problem is that nothing happens when I try to split the form into two columns:

class SomeForm(ModelForm):

    helper = FormHelper()
    helper.layout = Layout(
        Column('field1', 'field3'),
        Column('field2', 'field4'),
        )
    )

    class Meta:
        model = Model

Looking at the html output, I see that there is the <div class="formColumn">, but the form is displayed in one single column. Maybe is this an css issue? I am using Bootstrap 2.1.

Answer 1

Thanks maraujo.

I've achieved this using the div tag and the bootstrap docs: http://twitter.github.com/bootstrap/scaffolding.html

class SomeForm(ModelForm):

    helper = FormHelper()
    helper.layout = Layout(
        Div(
            Div('field1', css_class='span6'),
            Div('field3', css_class='span6'),  
        css_class='row-fluid'), 
    )

    class Meta:
        model = Model

For bootstrap3 replace span6 with col-xs-6 http://getbootstrap.com/css/#grid