Render the form in multiple columns

CHANGES.txt

@@ -1,3 +1,7 @@
+- 2017-03-13:
+
+  - Add support to set the nº of columns
+
 - 2015-03-09:
 
   - Fix unit test fail with Django 1.7 @nikolas
@@ -15,7 +19,7 @@
 - 2013-8-27:
 
   Add support for Bootstrap 3
-  
+
   contributed by `Nivl <https://github.com/Nivl>`_
 
 

README.rst

@@ -6,12 +6,12 @@ Django bootstrap form
    :alt: PyPI version
    :target: https://pypi.python.org/pypi/django-bootstrap-form
 
-.. image:: https://travis-ci.org/tzangms/django-bootstrap-form.png?branch=master   
+.. image:: https://travis-ci.org/tzangms/django-bootstrap-form.png?branch=master
     :target: https://travis-ci.org/tzangms/django-bootstrap-form
 
-.. image:: https://coveralls.io/repos/tzangms/django-bootstrap-form/badge.png?branch=master  
+.. image:: https://coveralls.io/repos/tzangms/django-bootstrap-form/badge.png?branch=master
    :target: https://coveralls.io/r/tzangms/django-bootstrap-form?branch=master
-   
+
 
 Twitter Bootstrap for Django Form.
 
@@ -38,6 +38,17 @@ Then to render your form::
 	    </div>
 	</form>
 
+You can optionally set the nº of columns to layout the form::
+
+	<form role="form">
+	    <legend>Form Title</legend>
+	    {% csrf_token %}
+	    {{ form|bootstrap:"3" }}
+	    <div class="form-group">
+	      <button type="submit" class="btn btn-primary">Submit</button>
+	    </div>
+	</form>
+
 You can also set class="form-vertical" on the form element.
 
 To use class="form-inline" on the form element, also change the "|boostrap" template tag to "|bootstrap_inline".
@@ -59,4 +70,4 @@ It is also possible to create a horizontal form. The form class and template tag
 Demo
 =====
 
-Checkout this `Demo site <http://django-bootstrap-form.herokuapp.com/>`_ to see it in action. 
+Checkout this `Demo site <http://django-bootstrap-form.herokuapp.com/>`_ to see it in action.

bootstrapform/templates/bootstrapform/form.html

@@ -1,3 +1,5 @@
+{% load bootstrap %}
+
 {% if form.non_field_errors %}
     <div class="alert alert-danger">
         <a class="close" data-dismiss="alert">&times;</a>
@@ -11,6 +13,18 @@
     {{ field }}
 {% endfor %}
 
-{% for field in form.visible_fields %}
-    {% include 'bootstrapform/field.html' %}
-{% endfor %}
+{% if num_cols %}
+    {% for row in form|as_grid:num_cols %}
+        <div class='row'>
+        {% for field in row %}
+            <div class="col-md-{{ col_width }}">
+                {% include 'bootstrapform/field.html' %}
+            </div>
+        {% endfor %}
+        </div>
+    {% endfor %}
+{% else %}
+    {% for field in form.visible_fields %}
+        {% include 'bootstrapform/field.html' %}
+    {% endfor %}
+{% endif %}

bootstrapform/templatetags/bootstrap.py

@@ -7,10 +7,11 @@
 
 register = template.Library()
 
+
 @register.filter
-def bootstrap(element):
+def bootstrap(element, num_cols=1):
     markup_classes = {'label': '', 'value': '', 'single_value': ''}
-    return render(element, markup_classes)
+    return render(element, markup_classes, int(num_cols))
 
 
 @register.filter
@@ -45,6 +46,7 @@ def bootstrap_horizontal(element, label_cols='col-sm-2 col-lg-2'):
 
     return render(element, markup_classes)
 
+
 @register.filter
 def add_input_classes(field):
     if not is_checkbox(field) and not is_multiple_checkbox(field) \
@@ -54,7 +56,7 @@ def add_input_classes(field):
         field.field.widget.attrs['class'] = field_classes
 
 
-def render(element, markup_classes):
+def render(element, markup_classes, num_cols=None):
     element_type = element.__class__.__name__.lower()
 
     if element_type == 'boundfield':
@@ -67,22 +69,46 @@ def render(element, markup_classes):
             for form in element.forms:
                 for field in form.visible_fields():
                     add_input_classes(field)
-
             template = get_template("bootstrapform/formset.html")
-            context = Context({'formset': element, 'classes': markup_classes})
+            context = Context({
+                'formset': element,
+                'classes': markup_classes,
+                'col_width': num_cols and (config.BOOTSTRAP_COLUMN_COUNT // num_cols),
+                'num_cols': num_cols,
+            })
         else:
             for field in element.visible_fields():
                 add_input_classes(field)
-
             template = get_template("bootstrapform/form.html")
-            context = Context({'form': element, 'classes': markup_classes})
+            context = Context({
+                'form': element,
+                'classes': markup_classes,
+                'col_width': num_cols and (config.BOOTSTRAP_COLUMN_COUNT // num_cols),
+                'num_cols': num_cols,
+            })
 
         if django_version >= (1, 8):
             context = context.flatten()
 
     return template.render(context)
 
 
+@register.filter
+def as_grid(form, num_cols=1):
+    visible_fields = form.visible_fields()
+    len_visible_fields = len(visible_fields)
+    rows = []
+    columns = []
+
+    for i, field in enumerate(visible_fields, start=1):
+        columns.append(field)
+        if not i % num_cols or i == len_visible_fields:
+            rows.append(columns)
+            columns = []
+
+    return rows
+
+
 @register.filter
 def is_checkbox(field):
     return isinstance(field.field.widget, forms.CheckboxInput)

docs/install.rst

@@ -49,18 +49,25 @@ Usage
 
     {{ form|bootstrap }}
 
-    # or use with individual field
+    # Optionally set the nº of columns
+    {{ form|bootstrap:"3" }}
+
+    # Or use with individual field
     {{ form.<field name>|bootstrap }} - To output individual fields
 
     # For horizontal forms
     {{ form|bootstrap_horizontal }}
-    
+
     # Or with custom size (default is 'col-lg-2 col-sm-2')
     {{ form|bootstrap_horizontal:'col-lg-4' }}
 
 CHANGELOG
 ---------
 
+- 2017-3-13:
+
+  Add support to set the nº of columns
+
 - 2013-8-27:
 
   Add support for Bootstrap 3, contributed by `Nivl <https://github.com/Nivl>`_