Columns
Documentation
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 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%.
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%).
| Description | Usage |
|---|---|
| Full width on smartphones and tablets | Select the class col-sm-12. |
| 50% width on smartphones and tablets | Select the class col-sm-6. |
| Remove the floating (pull-right) on smartphones | Select the class pull-none-xs. |
| Set a 100% height only on mobile devices | Select the class height-full-xs. |
Options
To display the column options click the Settings box icon .
| Description | Usage |
|---|---|
| Force col 12 (100%) on tablets | Select the class col-sm-12. |
| Horizontal centered columns | For center all columns of one row horizontally select the class Vertical row. |
| Boxed and boxed inverse | The 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 columns | Select the class proporzional-row. |
| Centered content on the middle of the column | Select the class middle-content. |
Animations, move, duplicate
Animations, move, duplicate and code features are explained in the general documentation page.