The columns component is a layout component. This means it is used to change the visual look and feel of your form without having any effect on how the data is stored. You can use columns to place components side by side and enable Team Forms to automatically adjust component placement based on the screen size. For example components placed within columns will be places side by side on your desktop and automatically wrap when on a mobile device with a smaller screen. This is demonstrated below.

To automatically respond to various devices sizes, Team Forms uses the bootstrap grid system. This means that if more than 12 columns are placed within a single row, each group of extra columns will wrap onto a new line.

When configuring the columns component you should aim for the column width property to add to 12 as shown below.