Skip to content

Toro Cloud Dev Center

Rows and containers

With Report Builder, you can utilize Bootstrap 4's grid system to set the layout of your report. Not only will your report widgets be organized, they'll be responsive1 as well.

Creating rows

Rows are what holds your columns. You can insert report widgets directly inside a row but it is not advised to do so. You can add rows simply by clicking the plus button on your main container or an existing column. You can add as many rows as you like.

Creating rows

Creating columns

Columns are the main building blocks for your desired layout. You can add columns by clicking the plus button on an existing row. A dialog will appear where you can choose how many units your new column will have. Unlike rows, columns can only hold up to 12 column units. For example, a row can hold any one of the following:

  • one 12-unit column
  • two 6-unit columns
  • three 4-unit columns
  • twelve 1-unit columns (avoid this if possible)

You can also mix and match. For example:

  • one 6-unit column and three 2-unit columns
  • one 5-unit column, one 4-unit column, and one 3-unit column

Creating columns

Responsive columns

You can further customize existing columns and make them responsive. Click on the options button of a column; a dialog will appear where you can modify the column's class.

Adding other responsive classes to columns

  1. If you add the necessary classes to make them responsive.