title: creating a form with many rows and columns with bootstrap
body: <p>I have a django template which i want it to present a model form but with different columns and rows. More specifically i want them to be in lets say a grid of three columns and the last row will have the remaining if any. My template is rendering  (its a bit large so i used fiddle)<a href="http://jsfiddle.net/zEcW5/" rel="nofollow noreferrer">the following code</a>. But while i see the different rows, my form stil has one column. Am i missing something?</p>
  
  <p>(Must I enter the code here too?)</p>
  
  <pre><code>&lt;div id="personal-data"&gt;
      &lt;form class="form-horizontal" action="/customer/edit/1/" method="post" enctype="multipart/form-data"&gt;
          &lt;input type="hidden" value="KTN76otstgqNoyE7Whzn6L9TAC2jvR9u" name="csrfmiddlewaretoken"&gt;&lt;/input&gt;
          &lt;legend&gt; Name &lt;/legend&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_first_name"&gt;
  
                          First name
  
                      &lt;/label&gt;
                      &lt;div id="form-first_name"&gt;
                          &lt;input id="id_first_name" class="form-control" type="text" value="Name" name="first_name" maxlength="150"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_last_name"&gt;
  
                          Last name
  
                      &lt;/label&gt;   
                      &lt;div id="form-last_name"&gt;
                          &lt;input id="id_last_name" class="form-control" type="text" value="Name" name="last_name" maxlength="200"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_email"&gt;
  
                          Email
  
                      &lt;/label&gt;
                      &lt;div id="form-email"&gt;
                          &lt;input id="id_email" class="form-control" type="text" name="email" maxlength="200"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_telephone"&gt;
  
                          Telephone
  
                      &lt;/label&gt;
                      &lt;div id="form-telephone"&gt;
                          &lt;input id="id_telephone" class="form-control" type="text" value="(664) 654-6545" placeholder="(XXX) XXX-XXXX" name="telephone" maxlength="14" autocomplete="off"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_mobile"&gt;
  
                          Mobile
  
                      &lt;/label&gt;
                      &lt;div id="form-mobile"&gt;
                          &lt;input id="id_mobile" class="form-control" type="text" value="9999999999" name="mobile" maxlength="25"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_street"&gt;
  
                          Street
  
                      &lt;/label&gt;
                      &lt;div id="form-street"&gt;
                          &lt;input id="id_street" class="form-control" type="text" name="street" maxlength="255"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_region"&gt;
  
                          Region
  
                      &lt;/label&gt;
                      &lt;div id="form-region"&gt;
                          &lt;input id="id_region" class="form-control" type="text" name="region" maxlength="130"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_state"&gt;
  
                          State
  
                      &lt;/label&gt;
                      &lt;div id="form-state"&gt;
                          &lt;input id="id_state" class="form-control" type="text" name="state" maxlength="70"&gt;&lt;/input&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_city"&gt;
  
                          City
  
                      &lt;/label&gt;
                      &lt;div id="form-city"&gt;
                          &lt;input id="id_city" class="form-control" type="text" name="city" maxlength="120"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_neighbourhood"&gt;
  
                          Neighbourhood
  
                      &lt;/label&gt;
                      &lt;div id="form-neighbourhood"&gt;
                          &lt;input id="id_neighbourhood" class="form-control" type="text" name="neighbourhood" maxlength="160"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_postal_code"&gt;
  
                          Postal code
  
                      &lt;/label&gt;
                      &lt;div id="form-postal_code"&gt;
                          &lt;input id="id_postal_code" class="form-control" type="text" name="postal_code" maxlength="20"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_country"&gt;
  
                          Country
  
                      &lt;/label&gt;
                      &lt;div id="form-country"&gt;
                          &lt;input id="id_country" class="form-control" type="text" name="country" maxlength="100"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="id_file"&gt;
  
                          Picture
  
                      &lt;/label&gt;
                      &lt;div id="form-file"&gt;
  
  
                            Currently: 
  
                      &lt;a href="/media/pictures/picture_1.jpg"&gt; … &lt;/a&gt;
                      &lt;input id="file-clear_id" type="checkbox" name="file-clear"&gt;&lt;/input&gt;
                          &lt;label for="file-clear_id"&gt;
  
                              Clear
  
                          &lt;/label&gt;
                          &lt;br&gt;&lt;/br&gt;
  
                          Change: 
  
                          &lt;input id="id_file" type="file" name="file"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;button class="btn form-control" type="submit"&gt; … &lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I didn't want to put such large code here, but it said that if I add a fiddler link it needs code too. </p>
  
  <p>EDIT: I'm sorry forgot to mention that the form is wrapped in a div with class .container. If I change the form class to .form-inline I still don't get the result I want but my form seem to get out of the "container's" bounds</p>