{"id":179,"date":"2020-02-12T10:36:54","date_gmt":"2020-02-12T10:36:54","guid":{"rendered":"https:\/\/www.lcn.com\/support\/knowledge-base\/understanding-rows-and-columns-in-instantsite\/"},"modified":"2020-08-11T08:43:47","modified_gmt":"2020-08-11T08:43:47","slug":"understanding-rows-and-columns-in-instantsite","status":"publish","type":"ht_kb","link":"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/","title":{"rendered":"Understanding Rows &#038; Columns in InstantSite"},"content":{"rendered":"\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please note:<\/strong>\u00a0This guide is for\u00a0legacy\u00a0InstantSite\u00a0pruchsed\u00a0before the 18th August 2020. If you have our new\u00a0InstantSite\u00a0please see guides specific\u00a0for our new\u00a0builder found\u00a0<a href=\"https:\/\/support.multiscreensite.com\/hc\/en-us\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/span><\/p>\n<\/div>\n\n\n\n<p><style>table {border-spacing: 0;border-collapse: collapse;}.table-responsive {text-align: center;}table.grid td {border: 4px solid white;padding: 6px;}<\/style><\/p>\n\n\n\n<p><a href=\"https:\/\/www.lcn.com\/instantsite\" target=\"_blank\" rel=\"noopener noreferrer\">InstantSite<\/a> is designed using the Bootstrap framework. This allows your site to be responsive to different screen sizes and devices. It\u2019s 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bootstrap Grid System.<\/h3>\n\n\n\n<p>Bootstrap\u2019s grid system allows you to add up to 12 columns across each row on the page. If you don\u2019t 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:<\/p>\n\n\n\n<div class=\"table-responsive\">\n<table class=\"grid\" style=\"width: 100%; border: none; background-color: #f6f4f0; padding: 0px; border-collapse: collapse;\" cellspacing=\"0\">\n<tbody>\n<tr>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<\/tr>\n<tr>\n<td colspan=\"4\">&nbsp;span 4<\/td>\n<td colspan=\"4\">&nbsp;span 4<\/td>\n<td colspan=\"4\">&nbsp;span 4<\/td>\n<\/tr>\n<tr>\n<td colspan=\"4\">span 4<\/td>\n<td colspan=\"8\">span 8<\/td>\n<\/tr>\n<tr>\n<td colspan=\"6\">span 6<\/td>\n<td colspan=\"6\">span 6<\/td>\n<\/tr>\n<tr>\n<td colspan=\"12\">span 12<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n\n\n<p>When adding a new element to InstantSite, it automatically creates a container, row and column.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The container is simply the box that hold your row.<\/li><li>The row is a 12-column bootstrap grid as described above;<\/li><li>The column is what holds the element you have added to the page.<\/li><\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why Columns and Rows are important<\/h3>\n\n\n\n<p>When creating your website, you want your content layout to look professional on any device. There\u2019s little point making your website look amazing on a desktop if it is barely usable on mobile.<\/p>\n\n\n\n<p>Bootstrap allows a websites design to become responsive despite of the device it\u2019s 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 <a href=\"http:\/\/www.getbootstrap.com\" target=\"_blank\" rel=\"noopener noreferrer\">getbootstrap.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Please note:\u00a0This guide is for\u00a0legacy\u00a0InstantSite\u00a0pruchsed\u00a0before the 18th August 2020. If you have our new\u00a0InstantSite\u00a0please see guides specific\u00a0for our new\u00a0builder found\u00a0here. InstantSite is designed using the Bootstrap framework. This allows your site to be responsive to different screen sizes and devices. It\u2019s important to understand the differences between rows and columns in InstantSite and how these [&hellip;]<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[4],"ht-kb-tag":[20],"class_list":["post-179","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-managing-web-hosting","ht_kb_tag-instantsite"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Understanding Rows &amp; Columns in InstantSite - LCN.com<\/title>\n<meta name=\"description\" content=\"InstantSite is designed using the Bootstrap framework. This allows your site to be responsive to different screen sizes and devices. It\u2019s 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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Rows &amp; Columns in InstantSite - LCN.com\" \/>\n<meta property=\"og:description\" content=\"InstantSite is designed using the Bootstrap framework. This allows your site to be responsive to different screen sizes and devices. It\u2019s 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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\" \/>\n<meta property=\"og:site_name\" content=\"Customer Support Guides - LCN\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/lcndotcom\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-11T08:43:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/support-facebook-feed.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@lcndotcom\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\",\"url\":\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\",\"name\":\"Understanding Rows & Columns in InstantSite - LCN.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.lcn.com\/support\/#website\"},\"datePublished\":\"2020-02-12T10:36:54+00:00\",\"dateModified\":\"2020-08-11T08:43:47+00:00\",\"description\":\"InstantSite is designed using the Bootstrap framework. This allows your site to be responsive to different screen sizes and devices. It\u2019s 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.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.lcn.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding Rows &#038; Columns in InstantSite\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.lcn.com\/support\/#website\",\"url\":\"https:\/\/www.lcn.com\/support\/\",\"name\":\"Customer Support Guides - LCN\",\"description\":\"- LCN\",\"publisher\":{\"@id\":\"https:\/\/www.lcn.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.lcn.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.lcn.com\/support\/#organization\",\"name\":\"LCN.com\",\"url\":\"https:\/\/www.lcn.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg\",\"contentUrl\":\"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg\",\"width\":461,\"height\":461,\"caption\":\"LCN.com\"},\"image\":{\"@id\":\"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/lcndotcom\",\"https:\/\/x.com\/lcndotcom\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding Rows & Columns in InstantSite - LCN.com","description":"InstantSite is designed using the Bootstrap framework. This allows your site to be responsive to different screen sizes and devices. It\u2019s 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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Rows & Columns in InstantSite - LCN.com","og_description":"InstantSite is designed using the Bootstrap framework. This allows your site to be responsive to different screen sizes and devices. It\u2019s 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.","og_url":"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/","og_site_name":"Customer Support Guides - LCN","article_publisher":"https:\/\/www.facebook.com\/lcndotcom","article_modified_time":"2020-08-11T08:43:47+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/support-facebook-feed.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@lcndotcom","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/","url":"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/","name":"Understanding Rows & Columns in InstantSite - LCN.com","isPartOf":{"@id":"https:\/\/www.lcn.com\/support\/#website"},"datePublished":"2020-02-12T10:36:54+00:00","dateModified":"2020-08-11T08:43:47+00:00","description":"InstantSite is designed using the Bootstrap framework. This allows your site to be responsive to different screen sizes and devices. It\u2019s 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.","breadcrumb":{"@id":"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.lcn.com\/support\/"},{"@type":"ListItem","position":2,"name":"Understanding Rows &#038; Columns in InstantSite"}]},{"@type":"WebSite","@id":"https:\/\/www.lcn.com\/support\/#website","url":"https:\/\/www.lcn.com\/support\/","name":"Customer Support Guides - LCN","description":"- LCN","publisher":{"@id":"https:\/\/www.lcn.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lcn.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.lcn.com\/support\/#organization","name":"LCN.com","url":"https:\/\/www.lcn.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg","contentUrl":"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg","width":461,"height":461,"caption":"LCN.com"},"image":{"@id":"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/lcndotcom","https:\/\/x.com\/lcndotcom"]}]}},"_links":{"self":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb\/179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/comments?post=179"}],"version-history":[{"count":2,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb\/179\/revisions"}],"predecessor-version":[{"id":1055,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb\/179\/revisions\/1055"}],"wp:attachment":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/media?parent=179"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb-category?post=179"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb-tag?post=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}