{"id":3323,"date":"2018-01-09T14:12:09","date_gmt":"2018-01-09T19:12:09","guid":{"rendered":"https:\/\/www.pair.com\/support\/kb\/?p=3323"},"modified":"2020-02-26T09:17:03","modified_gmt":"2020-02-26T14:17:03","slug":"understanding-bootstraps-grid-system","status":"publish","type":"ht_kb","link":"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/","title":{"rendered":"Understanding Bootstrap’s Grid System"},"content":{"rendered":" \t\t
\r\n \t\t\t \t\t\t \t\t\t\t

\r\n \t\t\t\t\tThis article has been updated to work with Bootstrap v.4.2. \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t\n

Bootstrap is a framework for building a website. It cuts out the need to build the base for a site. Instead, you can download the Bootstrap files to your server, then add a Bootstrap template. There are instructions on how to do this in our <\/span>Setting Up Bootstrap<\/span><\/a> article. <\/span><\/p>\n

This will give you a basic site. However, what really makes Bootstrap impressive is its wide array of website components that can be added to the site. Since Bootstrap already has a built-in CSS and Javascript, components are already styled and functional. Of course, you can edit the CSS and Javascript to customize your site to your tastes.<\/span><\/p>\n

The Bootstrap Grid System<\/h3>\n

Bootstrap relies on a grid system in order to properly scale components for different viewing screens. This may sound confusing, but we\u2019re going to break down how the grid system works in this article. <\/span><\/p>\n

The Bootstrap grid system is made up of containers, rows, and column, all of which are used to define the site\u2019s layout.<\/span><\/p>\n

Containers<\/h4>\n

Bootstrap containers are used to establish the width for the layout. Elements are added within the containers and will be affected by the container\u2019s width. A container is a <\/span><div><\/span><\/span> element with a class=\u201ccontainer\u201d<\/span><\/span>. The container will affect all elements within the <\/span><div><\/span> container. <\/span><\/p>\n

<div class=\u201ccontainer\u201d><\/span>\r\n \u00a0<!-- container contents go here --><\/span>\r\n<\/div><\/span><\/pre>\n
Containers have a 15 pixel padding by default, which cushions it from the end of the page and from other containers.\"container<\/a><\/span><\/p>\n
Rows and columns will be added inside the containers. <\/span><\/p>\n    \t\t
\r\n    \t\t\t    \t\t\t    \t\t\t\t
\r\n    \t\t\t\t\tDo not nest a container within a container.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div>\r\n    \t\t\n
Fixed-Width Containers<\/h5>\n
Containers have default fixed widths that will change based on the size of the viewing device. The viewing device width and corresponding container width are listed in the table below:
\n<\/span><\/p>\n\n\n\n\n\n\n\n\n
Viewing Device Width<\/b><\/td>\nContainer Width<\/b><\/td>\n<\/tr>\n
Less than 575px<\/span><\/td>\nAuto<\/span><\/td>\n<\/tr>\n
576px \u00a0to 767px<\/span><\/td>\n540px<\/span><\/td>\n<\/tr>\n
768px to 991px<\/span><\/td>\n720px<\/span><\/td>\n<\/tr>\n
992px to 1199px<\/span><\/td>\n960px<\/span><\/td>\n<\/tr>\n
1200px or higher<\/span><\/td>\n1140px<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Fluid Containers<\/h5>\n
If you don\u2019t want the containers to resize in fixed widths, you can use the\u00a0<\/span>class=\u201dcontainer-fluid\u201d<\/span> instead of<\/span> class=\u201dcontainer\u201d<\/span>. Doing this will cause the containers to always match the width of the viewing screen, rather than resize to a fixed width.<\/span><\/p>\n
Columns and Rows<\/h4>\n
The Bootstrap grid system allows up to 12 columns across a page. These columns can be used singly or grouped together. To group the columns together, you need to create rows. To create rows, add a div with a <\/span>class=\u201crow\u201d<\/span> that encases the column code. <\/span><\/p>\n    \t\t
\r\n    \t\t\t    \t\t\t    \t\t\t\t
\r\n    \t\t\t\t\t\u00a0<\/b>Rows must always be placed inside of a container.<\/span>    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div>\r\n    \t\t\n
Example: <\/span><\/p>\n
<div class=\u201dcontainer\u201d><\/span>\r\n  <div class=\u201drow\u201d><\/span>\r\n    <div class=\u201dcol-xs-6 col-md-4\u201d>The content within the column.<\/div><\/span>\r\n  <\/div><\/span>\r\n<\/div><\/span><\/pre>\n
Rows span the width of the container. They have a negative 15 pixel margin at the end, essentially removing the 15 pixel margin set by its container. This is because the columns each have a 15 pixel margin of their own that replaces the container\u2019s margin.\u00a0<\/span><\/p>\n
\"Row<\/a>
Rows have a -15 px padding that negates the container's 15 px padding.<\/figcaption><\/figure>\n
Columns aligned next to each other will each have a 15 pixel margin, resulting in a 30 pixel margin between the two columns.Content within the column will be affected by the column\u2019s 15 pixel margin. <\/span><\/p>\n
\"column<\/a>
Columns have a 15 px padding. Columns next to each other will both have a 15 px padding, resulting in a 30 px buffer.<\/figcaption><\/figure>\n
Adding Columns<\/h5>\n
Bootstrap columns sizing can be distinguished by the column classes. The column classes are usually set up in the \u201ccol-<\/span>prefix<\/span><\/i>-<\/span>ColumnNumber<\/span><\/i>\u201d format, which will resemble this example: <\/span><\/p>\n
<div class=\u201ccontainer\u201d><\/span>\r\n  <div class=\u201crow\u201d><\/span>\r\n    <div class=\u201c<\/span>col-sm-8<\/span>\u201d> Content <\/div><\/span>\r\n    <div class=\u201c<\/span>col-sm-4<\/span>\u201d> Content <\/div><\/span>\r\n  <\/div><\/span>\r\n<\/div><\/span><\/pre>\n    \t\t
\r\n    \t\t\t    \t\t\t    \t\t\t\t
\r\n    \t\t\t\t\tColumns <\/span>must<\/span><\/i> be placed inside of a <\/span>row<\/span>.<\/span>    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div>\r\n    \t\t\n
Replace the <\/span>prefix<\/span><\/i> and <\/span>ColumnNumber <\/span><\/i>with the preferred prefix size and number of columns. <\/span><\/p>\n
Prefixes define what device the column is meant for. For example, the <\/span>sm<\/span><\/i> is designed for small screens, like phones.
\n<\/span><\/p>\n\n\n\n\n\n\n\n\n
Size<\/b><\/td>\nPrefix<\/b><\/td>\nColumn<\/b><\/td>\nFor<\/b><\/td>\n<\/tr>\n
Extra Small<\/span><\/td>\nNone (default)<\/span><\/td>\n.col-<\/span><\/td>\n<576<\/span><\/td>\n<\/tr>\n
Small (phones)<\/span><\/td>\nsm<\/span><\/td>\n.col-sm-<\/span><\/td>\n\u2265576px<\/span><\/td>\n<\/tr>\n
Medium (tablets)<\/span><\/td>\nmd<\/span><\/td>\n.col-md-<\/span><\/td>\n\u2265768px<\/span><\/td>\n<\/tr>\n
Large (laptops)<\/span><\/td>\nlg<\/span><\/td>\n.col-lg-<\/span><\/td>\n\u2265992px<\/span><\/td>\n<\/tr>\n
Extra Large (desktops)<\/span><\/td>\nxl<\/span><\/td>\n.col-xl-<\/span><\/td>\n\u22651200px<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\nThe\u00a0ColumnNumber <\/i>at the end of grid class, such as class=\u201ccol-md-4<\/span>\u201d<\/span>, establishes how many columns that it should span. In the example, class=\u201ccol-md-4<\/span>\u201d<\/span>, the content within the column\u2019s <div><\/span> would span four columns on a medium sized device, like a laptop. When a column is set with a prefix for a smaller device, such as a <\/span>sm<\/span><\/i>, it will display similarly on larger devices as well. In other words, a column defined as <\/span>sm<\/span><\/i> will work for devices of tablet size or larger. <\/span><\/p>\n
To make columns align side-by-side, include them in the same row. <\/span><\/p>\n
<div class=\"row\"><\/span>\r\n \u00a0<div class=\"col-md-4\"> Content <\/div><\/span>\r\n \u00a0<div class=\"col-md-8\"> Content <\/div><\/span>\r\n<\/div><\/span>\r\n<\/pre>\n
In the end, you want your columns in a row to add up to twelve.<\/span><\/p>\n
Adjusting Columns for Different Devices<\/h5>\n
You can also adjust your columns so that they will have different column widths per device size. To do this, you simply include another <\/span>col-prefix-columnNumber<\/span> to your class. It will look something like this: <\/span><\/p>\n
<div class=\u201dcontainer\u201d><\/span>\r\n  <div class=\u201drow\u201d><\/span>\r\n    <div class=\u201dcol-xs-6 col-sm-4\u201d> Content <\/div><\/span>\r\n  <\/div><\/span>\r\n<\/div><\/span><\/pre>\n
In the example, the content would be positioned across six columns for extra-small viewing screens, while medium viewing screens would change the content to show across four columns.<\/span><\/p>\n
Nesting Columns<\/h5>\n
You can nest columns once you have a container, row, and column set up. \u00a0To do this, add a new row <\/span><div><\/span> within the parent column\u2019s code, then add your nested columns. It will function as if the area inside the new row is its own grid system. <\/span><\/p>\n
<div class=\u201ccontainer\u201d><\/span>\r\n  <div class=\u201crow\u201d><\/span>\r\n   <div class= \u201c<\/span>col-sm-6\u201d> Parent column content<\/span>\r\n     <div class=\u201crow\u201d> <\/span>\r\n         <div class=\u201ccol-xs-6\u201d> Child column content <\/div><\/span>\r\n     <\/div><\/span>\r\n   <\/div><\/span>\r\n  <\/div><\/span>\r\n<\/div><\/span><\/pre>\n    \t\t
\r\n    \t\t\t    \t\t\t    \t\t\t\t
\r\n    \t\t\t\t\tBootstrap is an open-source CSS framework permissive under an MIT license. Bootstrap is not a product of Pair Networks, Inc., and Pair Networks provides no warranty for Bootstrap. Please note that there are many levels of CSS frameworks available. Please consult with your IT professional for advice and guidance on an appropriate CSS framework. This specific product may or may not meet your needs. Pair Networks, Inc. is providing support for this tutorial for your convenience and is not responsible for Bootstrap's performance. Please read carefully the terms and scope of services for any online service or product you are considering purchasing or using.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div>\r\n    \t\t\n","protected":false},"excerpt":{"rendered":"
Bootstrap is a framework for building a website. It cuts out the need to build the base for a site. Instead, you can download the Bootstrap files to your server, then add a Bootstrap template. There are instructions on how to do this in our Setting Up Bootstrap article. This…<\/p>\n","protected":false},"author":11,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[33],"ht-kb-tag":[187],"yoast_head":"\nUnderstanding Bootstrap's Grid System - Knowledge Base - Pair Networks<\/title>\n<meta name=\"description\" content=\"Bootstrap relies on a grid system in order to properly scale components for different viewing screens. Learn about using the bootstrap grid system here.\" \/>\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.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Bootstrap's Grid System - Knowledge Base - Pair Networks\" \/>\n<meta property=\"og:description\" content=\"Bootstrap relies on a grid system in order to properly scale components for different viewing screens. Learn about using the bootstrap grid system here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowledge Base - Pair Networks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pairnetworks\/\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-26T14:17:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2018\/01\/Container-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@pairNetworks\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/\",\"name\":\"Understanding Bootstrap's Grid System - Knowledge Base - Pair Networks\",\"isPartOf\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\"},\"datePublished\":\"2018-01-09T19:12:09+00:00\",\"dateModified\":\"2020-02-26T14:17:03+00:00\",\"description\":\"Bootstrap relies on a grid system in order to properly scale components for different viewing screens. Learn about using the bootstrap grid system here.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pair.com\/support\/kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding Bootstrap’s Grid System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"name\":\"Knowledge Base - Pair Networks\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\",\"name\":\"Pair Networks\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"contentUrl\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"width\":360,\"height\":360,\"caption\":\"Pair Networks\"},\"image\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pairnetworks\/\",\"https:\/\/twitter.com\/pairNetworks\",\"https:\/\/www.instagram.com\/pairnetworks\/\",\"https:\/\/www.linkedin.com\/company\/2269676\/\",\"https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/\",\"https:\/\/www.youtube.com\/user\/pairnetworks\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding Bootstrap's Grid System - Knowledge Base - Pair Networks","description":"Bootstrap relies on a grid system in order to properly scale components for different viewing screens. Learn about using the bootstrap grid system here.","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.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Bootstrap's Grid System - Knowledge Base - Pair Networks","og_description":"Bootstrap relies on a grid system in order to properly scale components for different viewing screens. Learn about using the bootstrap grid system here.","og_url":"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/","og_site_name":"Knowledge Base - Pair Networks","article_publisher":"https:\/\/www.facebook.com\/pairnetworks\/","article_modified_time":"2020-02-26T14:17:03+00:00","og_image":[{"url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2018\/01\/Container-1.png"}],"twitter_card":"summary_large_image","twitter_site":"@pairNetworks","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/","url":"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/","name":"Understanding Bootstrap's Grid System - Knowledge Base - Pair Networks","isPartOf":{"@id":"https:\/\/www.pair.com\/support\/kb\/#website"},"datePublished":"2018-01-09T19:12:09+00:00","dateModified":"2020-02-26T14:17:03+00:00","description":"Bootstrap relies on a grid system in order to properly scale components for different viewing screens. Learn about using the bootstrap grid system here.","breadcrumb":{"@id":"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pair.com\/support\/kb\/understanding-bootstraps-grid-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pair.com\/support\/kb\/"},{"@type":"ListItem","position":2,"name":"Understanding Bootstrap’s Grid System"}]},{"@type":"WebSite","@id":"https:\/\/www.pair.com\/support\/kb\/#website","url":"https:\/\/www.pair.com\/support\/kb\/","name":"Knowledge Base - Pair Networks","description":"","publisher":{"@id":"https:\/\/www.pair.com\/support\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.pair.com\/support\/kb\/#organization","name":"Pair Networks","url":"https:\/\/www.pair.com\/support\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","contentUrl":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","width":360,"height":360,"caption":"Pair Networks"},"image":{"@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pairnetworks\/","https:\/\/twitter.com\/pairNetworks","https:\/\/www.instagram.com\/pairnetworks\/","https:\/\/www.linkedin.com\/company\/2269676\/","https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/","https:\/\/www.youtube.com\/user\/pairnetworks"]}]}},"_links":{"self":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3323"}],"collection":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/comments?post=3323"}],"version-history":[{"count":20,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3323\/revisions"}],"predecessor-version":[{"id":7423,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3323\/revisions\/7423"}],"wp:attachment":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/media?parent=3323"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=3323"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=3323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}