Columns

Documentation - components

COMPOSER ITEMS


USAGE

The columns are containers with different widths, responsive and based on the 12-grid system of Bootstrap. You can change the column width when you want 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%.
When you edit a page, and you add a column with Hybrid composer, you click the button on bottom, but the columns are aligned horizontally and the column just created will fill the row, so can be placed on top right.

Responsive
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%).


OPTIONS

DescriptionUsage
Force col 12 (100%) on tabletsClick on CSS button and select the class col-sm-12
Horizontal centered columnsFor center all columns of one row horizontally click on CSS button and select the class vertical row

ANIMATIONS - MOVE - DUPLICATE - CODE

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