Composer items


The columns are containers with different widths, responsive and based on the 12-grid system of Bootstrap. You can change the column width by click on top right button . The columns are the main container of every content and are grouped into the rows. You must add the correct number of column to reach the full width of a row, a row is full when the sum of inner columns reach 12 (100%). For example if you insert 3 columns of with 4 (33.3%) you fill one row: 4 + 4 + 4 = 12, this is another way to write: 33.3 % + 33.3 % + 33.3% = 100%.


The columns are responsive, and his width change for different screen sizes.
  • Phone (width < 768px) All the columns from 1 to 12 become column 12 (100% width).
  • Tablets (992px > width > 768px) Columns 6 - 3 - 9 become column 6 (50% width), columns 4 - 2 become column 4 (33.3%), column 8 become column 9 (66.6%), the other columns become column 12 (100%).
Full width on smartphones and tabletsSelect the class col-sm-12.
50% width on smartphones and tabletsSelect the class col-sm-6.
Remove the floating (pull-right) on smartphonesSelect the class pull-none-xs.
Set a 100% height only on mobile devicesSelect the class height-full-xs.


To display the column options click the Settings box icon .

Force col 12 (100%) on tabletsSelect the class col-sm-12.
Horizontal centered columnsFor center all columns of one row horizontally select the class Vertical row.
Boxed and boxed inverseThe classes add background and padding to the column. The boxed layout assign the background color of the site can require also the white class.
Same height for all columnsSelect the class proporzional-row.
Centered content on the middle of the columnSelect the class middle-content.

Animations, move, duplicate

Animations, move, duplicate and code features are explained in the general documentation page.