Why

A columns component will allow pages of the demo to have unique and customizable layouts. It will allow evaluators to see how they can easily create layouts. It will show evaluators how they can integrate a css layout framework such as Twitter Bootstrap.
This is important in part to demonstrate how to build up rich pages with just a few components.

Component details

The component should work similarly to the row component of Tomas' Twitter bootstrap template set on the Forge.

The dialog for a row contains a "Layout" selector with the following options:
The values of the select should simply be the list of column widths delimited by spaces.

Based on the selection - between one and four columns are displayed, which are areas where a user can add components. The area should have all MTE components available.
Of course the column div for each of the areas must have the appropriate bootstrap css.

The four areas should be created only once upon component creation - so that after a user enters components into the areas the user can still change the layout and the components will remain intact.

I recommend using the bootstrap col-sm- classes for all layouts except those with a col width of 3 where I would use col-md- classes.

The component html should output a row css class at the top level - but not a bootstrap container class as it will be used in the context of the demo where container classes are already specified.

Usage in demo

This component should be available in the main area of home and standard pages. (magnolia-travel-demo home.yaml & standard.yaml).
Use the Columns Layout component on the "about" page to create a "2 cols (1:1)" layout under the jumbotron.

Note

Thanks to improvement proposed in MGNLDEMO-102, Images included in different row widths would automatically load an appropriately sized rendition.