{"id":17044,"date":"2019-03-07T07:12:00","date_gmt":"2019-03-07T12:12:00","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=17044"},"modified":"2020-03-24T09:34:41","modified_gmt":"2020-03-24T13:34:41","slug":"what-makes-a-boldgrid-theme-responsive","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-inspirations-plugin-product-guide\/what-makes-a-boldgrid-theme-responsive\/","title":{"rendered":"What Makes a BoldGrid Theme Responsive?"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p>In short, BoldGrid themes use a responsive framework based on the <span style=\"text-decoration: underline;\"><a href=\"http:\/\/getbootstrap.com\/css\/#grid\">Bootstrap Grid System<\/a><\/span>. A BoldGrid Inspiration consists of Blocks, Modules, and Themes. &nbsp;These three elements are called the <span style=\"font-weight: bold;\">BoldGrid Layers, <\/span>which make up our <a href=\"https:\/\/www.boldgrid.com\/website-builder\/\">WordPress website builder<\/a>. &nbsp;These layers work together in displaying content for a BoldGrid created site and provide definitions of how the site should be displayed for different display sizes. &nbsp;This ability to handle how content changes as the screen size changes is what makes BoldGrid themes for WordPress responsive.<\/p>\n<h2 id=\"the-bootstrap-grid-system-in-boldgrid-themes\">The Bootstrap Grid System in BoldGrid Themes<\/h2>\n<p>While the <em>Bootstrap Grid System<\/em> can use up to 12 columns, the BoldGrid system defines only three main sizes: &nbsp;<span style=\"font-style: italic;\">xs<\/span>, <span style=\"font-style: italic;\">sm<\/span>, and <span style=\"font-style: italic;\">md<\/span>. To understand this, imagine a block of content that includes 3 columns. &nbsp;These columns are defined for the page layout with specific behavior changes depending on the size of the display. &nbsp;So, as you begin to shrink the screen from its maximum size that is displaying 3 columns, you will eventually reach a point where only 2 columns are supported. &nbsp;The content is automatically shifted into to the columns, menus are adjusted as needed, page titles are resized, etc. &nbsp;This is done for 3 specific sizes within a BoldGrid theme. &nbsp;Typically, these sizes represent a computer monitor (the largest size), a tablet (the medium size), and a smartphone (the smallest size). &nbsp;The grid system is a pre-defined map of where content will flow or transform as the screen size changes.<\/p>\n<p>You now have an understanding of how a BoldGrid WordPress Theme is responsive. &nbsp;Responsive design of websites allows for a single set of code that can handle multiple display requirements. &nbsp;This saves time and money when you develop your WordPress site. For more specific information about the grid system and other content standards used by BoldGrid, please reference the <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.boldgrid.com\/docs\/theme-guide\">BoldGrid Theme Requirements<\/a><\/span>.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>In short, BoldGrid themes use a responsive framework based on the Bootstrap Grid System. A BoldGrid Inspiration consists of Blocks, Modules, and Themes. &nbsp;These three elements are called the BoldGrid Layers, which make up our WordPress website builder. &nbsp;These layers work together in displaying content for a BoldGrid created site and provide definitions of how [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[146],"tags":[],"class_list":["post-17044","post","type-post","status-publish","format-standard","hentry","category-boldgrid-inspirations-plugin-product-guide"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/17044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=17044"}],"version-history":[{"count":4,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/17044\/revisions"}],"predecessor-version":[{"id":19071,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/17044\/revisions\/19071"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=17044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=17044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=17044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}