The forms uses Bootstrap 3.3 and its grid system can be used for this. In order to make the fields fall next to each other, you need to enter the fields Settings (the cog link in the list of fields).
With the help of Bootstraps predefined CSS classes, you can easily divide your forms into columns to make the forms clearer and more user-friendly. The example below sets the field to occupy half of the screen width (two columns) with the CSS class col-sm-6.
If you have started using these CSS classes then you must continue to put CSS classes on the remaining fields also so that they do not end up skewed due to mismatching CSS rules for margins etc.
In an example below you can see the heading have less margin than the other elements in the form. This is because the heading is added through Lime Forms interface, and thus lack the same CSS properties as the classes for dividing into columns added to the other fields in the example seen here.
To work around this issue, simply remove the standard heading and add the same heading but in a Custom HTML field instead, and there be sure to add the correct CSS-class to get the same margins etc.
There is detailed documentation on Bootstrap and how to use the framework here.
0 Kommentarer