Understanding Rows & Columns in InstantSite
Please note: This guide is for legacy InstantSite pruchsed before the 18th August 2020. If you have our new InstantSite please see guides specific for our new builder found here.
InstantSite is designed using the Bootstrap framework. This allows your site to be responsive to different screen sizes and devices. It’s important to understand the differences between rows and columns in InstantSite and how these are used to ensure your site looks correct in a desktop and mobile environment.
Bootstrap Grid System.
Bootstrap’s grid system allows you to add up to 12 columns across each row on the page. If you don’t want to use all 12 columns individually, you can use a collection of columns together. Below is an example of the groups of columns that can be used:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
When adding a new element to InstantSite, it automatically creates a container, row and column.
- The container is simply the box that hold your row.
- The row is a 12-column bootstrap grid as described above;
- The column is what holds the element you have added to the page.
A column can span anywhere between the 1 and 12 spaces allowed in the 12-column bootstrap grid. The element can then be sized within this column to either be full width or a portion of the 12 columns available.
Why Columns and Rows are important
When creating your website, you want your content layout to look professional on any device. There’s little point making your website look amazing on a desktop if it is barely usable on mobile.
Bootstrap allows a websites design to become responsive despite of the device it’s viewed on. It does this using the 12-column bootstrap grid system described above. For more information about how Bootstrap grids work to make your content responsive, visit getbootstrap.com