Forms - Customize The Column Width For Edit Grid

[system]

How to customize the column width for Edit Grid?

Customize column widths of an Edit grid using the below steps. Edit grid uses Bootstrap grid system. Column classes indicate the number of columns to use out of the possible 12 per row. So, if three equal-width columns across are needed, use col-sm-4. Read more about how the Bootstrap Grid System works.

1. Consider the below form where we have 3 columns and a row in an edit grid. By default, the "column3" column does not extend until the extreme right of the form. To achieve this to optimize the space utilized, make the below modifications to the "row template" of the edit grid component.

2. Set the class as "col-sm-8" for the column "column3" and "col-sm-2" for the other 2 columns. The sum should be equal to 12. (2+2+8)

3. Below is the end result