Discuss

Building Multi-Column Forms

On this page

You can easily build multi-column form layout with Wappler, using the built-in Bootstrap 4 form tools.

First, let's insert the form. We add the form inside a Bootstrap 4 column. Click the Add Inside button:

Screenshot_1|690x396

And select Form:

Screenshot_2|690x396

Then click the Add Inside button in the form:

Screenshot_3|690x396

And add Form Row - this is required in order to build multi-column layout:

Screenshot_4|690x396

And now we can start adding the columns inside the row. Click the Add Inside button:

Screenshot_5|690x396

Add a Column:

Screenshot_6|690x396

And inside the column we add the input we need. Click Add Inside:

Screenshot_7|690x396

We select Input Form Group:

Screenshot_8|690x396

We are done with this column. We can add more columns here, just select the column we just added and click the Add After button:

Screenshot_9|690x396

Add a column:

Screenshot_10|690x396

And inside it add some other input:

Screenshot_11|690x396

In this column we add a Custom Select Group:

Screenshot_12|690x396

Now we have two columns in our form row, containing out inputs. Let's setup the layout for small screens. Click the Phone layout icon:

Screenshot_13|690x396

Select the first column in the row:

Screenshot_14|690x396

And set its size to what you need it to be. We select size 12 columns here:

Screenshot_15|690x396

Then we do the same for the second column:

Screenshot_16|690x396

We are done with the mobile layout. Do this for any of the screen sizes you need to adjust layout differently. For example, we'd like to have the form columns set to size 12 to all the screen sizes up to Tablet. So we select the Table icon, and select the first column:

Screenshot_17|690x396

We set its size to 6 columns:

Screenshot_18|690x396

We do the same for the second column:

Screenshot_19|690x396

So the devices with sizes of a tablet and bigger will show the form inputs in two equal columns. Switch to full view to see the result:

Screenshot_20|690x396

Here's the result:

Screenshot_21|690x396

You can have any column configuration for your form rows, just as in the Bootstrap 4 grid. Note, that the sum of the columns sizes per row should not exceed 12. You can add as many rows in your columns as you need.