Bootstrap horizontal form in Drupal

Drupal 7, Bootstrap theme

I'm trying to make the horizontal form. The tag has the .form-horizontal class and labels have the .form-control class. However, the form is stil rendered with line breaks. The only difference is extra 15px of left and right padding (?)

Please have a look at the very short page at: http://ovaj.link/

Thanks!

Solution

Your syntax of bootstrap form html is wrong, the input need to be surrounded by a div with a size, the label also need a size, else Bootstrap as fabulous of a framework it is, can't figure out wich size you want for them (lets say label = col-sm-2 and div = col-sm-10, goal is to reach 12 on one line). For example your first field should respect this html structure :

<div class="form-group form-item form-item-long-url form-type-textfield"> 
  <label for="edit-long-url" class="control-label col-sm-2">Enter long URL: </label>
  <div class="col-sm-10">
    <input type="text" maxlength="255" size="60" value="http://" name="long_url" id="edit-long-url" class="form-control col-sm-10 form-text" tabindex="1">
  </div>
</div>

Follow the documentation example : http://getbootstrap.com/css/#forms-horizontal