Display fields in three columns twitter bootstrap

Question

I have an array like below

us_states = [('AL', 'Alabama'),('AK', 'Alaska'),('AZ', 'Arizona'),('AR', 'Arkansas')('CA', 'California'),('CO', 'Colorado'),('CT', 'Connecticut'),('DE', 'Delaware'),.... until 50 us states]

So based on this list/array i am generating the html fields in a p as below

{% for state in us_states %}
   <p>
     <input id="{{state.0}}" type="checkbox" name="{{state.0}}"/>   
     <span style="padding-left:5px;">{{state.1}}</span>
     <input id="id_{{state.1}}" type="text" name="{{state.0}}" value="0.0">
   </p>
{% endfor %}

So from the above html code, i can able to generate the checkbox, input field according the length of array , i mean for example i have 50 us states in the list/array, so 50 p elements with checkbox, span, input elements are generated succesfully

But the problem is all the fields are generating in a single page line by line, but what i want is i want to divide them in to three columns (like 20, 15, 15 what ever), so that the UI looks good right ?

So i am really confused on how to achieve this with twitter bootstrap ? So can anyone please let me know, on how to arrange the 50 p elements that are generated from the list in to there columns ?

Answer 1

You would have to manually create 3 column divs and make three loops that go through 1-20, 21-35, 36-50.

Depending on your templating engine (twig? underscore? ejs?), it should look like this algorithm:

<div class="column">
    {% for (i=1; i<20; i++) { %}
        <p>
          ...
          {{ states[i].0 }} - {{ states[i].1 }}
          ...
        </p>
    {% } %}
</div>
<div class="column">
    {% for (i=21; i<35; i++) { %}
        <p>
          ...
          {{ states[i].0 }} - {{ states[i].1 }}
          ...
        </p>
    {% } %}
</div>
<div class="column">
    {% for (i=36; i<50; i++) { %}
        <p>
          ...
          {{ states[i].0 }} - {{ states[i].1 }}
          ...
        </p>
    {% } %}
</div>

Using bootstrap you should perhaps use a span4 instead of the column class in my case

Alternatively, a ninja could put all three loops into a single nested loops, the outer loop just changes the values that i iterates through.