For more structured form layouts that are also responsive, you can utilize Bootstrap’s predefined grid classes or mixins to create horizontal forms. Add the .row class to form groups (or containing div’s) and use the .col-*-* classes to specify the width of your labels and controls.

Different layout combinations can also be made by using the .edge-*-*-* classes and applying the grid to different levels, e.g. you could use a label as a column and an input as a column, or you could use a .form-group as a column.

It‘s worth noting that studies have shown single-column forms to perform better CX Partners Eyetracking Study(external link). Along this line of thinking using the layout options to control the width of your form at each breakpoint would be better than using them to create multi-column forms.

Examples

Accessibility

  • Do not visually reorder inputs in a way that does not represent the DOM order