{"id":1403,"date":"2018-06-14T17:05:07","date_gmt":"2018-06-14T21:05:07","guid":{"rendered":"http:\/\/id-demos.cms-devl.bu.edu\/core-3\/?page_id=1403"},"modified":"2018-06-14T17:05:59","modified_gmt":"2018-06-14T21:05:59","slug":"full-width-all-breakpoints","status":"publish","type":"page","link":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/html-elements\/grid\/bootstrap-push-classes\/full-width-all-breakpoints\/","title":{"rendered":"Full width &#8211; all breakpoints"},"content":{"rendered":"<h3>Show backgrounds:<\/h3>\n<p><label><input id=\"row\" name=\"row\" type=\"checkbox\" checked=\"checked\" onchange=\"showBoundaries('.row')\"> Show background on the row class (Transparent red)<\/label><label><input id=\"col\" name=\"col\" type=\"checkbox\" checked=\"checked\" onchange=\"showBoundaries('.row&gt;div')\"> Show background on the column classes (Transparent blue)<\/label><label><input id=\"content\" name=\"content\" type=\"checkbox\" checked=\"checked\" onchange=\"showBoundaries('.grid-example-content-wrap')\"> Show background to show where space for content is available (White)<\/label><\/p>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-1\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/div>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-2\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/p><\/div>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-3\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/p><\/div>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-4\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/p><\/div>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-5\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/p><\/div>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-6\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/p><\/div>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-7\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/p><\/div>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-8\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/p><\/div>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-9\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/p><\/div>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-10\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/p><\/div>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-11\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/p><\/div>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-12\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/div>\n<p><\/sub><\/div>\n<\/div>\n<h3>One column<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-1\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>1<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-1&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<h3>Two columns<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-2\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>2<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-2&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<h3>Three columns<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-3\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>3<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-3&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<h3>Four columns<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-4\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>4<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-4&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<h3>Five columns<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-5\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>5<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-5&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<h3>Six columns<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-6\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>6<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-6&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<h3>Seven columns<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-7\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>7<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-7&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<h3>Eight columns<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-8\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>8<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-8&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<h3>Nine columns<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-9\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>9<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-9&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<h3>Ten columns<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-10\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>10<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-10&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<h3>Eleven columns<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-11\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>11<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-11&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<h3>Twelve columns<\/h3>\n<h4>Example<\/h4>\n<div class=\"row grid-example grid-example-show-boundaries\">\n<div class=\"grid-example-show-boundaries col-1 col-push-12\">\n<div class=\"grid-example-content-wrap grid-example-show-boundaries\"><sup>12<\/sup>&frasl;<sub>12<\/sub><\/div>\n<\/div>\n<\/div>\n<h4>Code snippet<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;\r\n\t&amp;lt;div class=&amp;quot;col-push-12&amp;quot;&amp;gt;Your HTML here&amp;lt;\/div&amp;gt;\r\n&amp;lt;\/div&amp;gt;\r\n<\/pre>\n<p><script type=\"text\/javascript\">\r\n\tjQuery('input').prop('checked', true);\r\n\r\n\tfunction showBoundaries(className) {\r\n\t\tjQuery(className).toggleClass('grid-example-show-boundaries');\r\n\t}\r\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Show backgrounds: Show background on the row class (Transparent red) Show background on the column classes (Transparent blue) Show background to show where space for content is available (White) 1&frasl;12 1&frasl;12 1&frasl;12 1&frasl;12 1&frasl;12 1&frasl;12 1&frasl;12 1&frasl;12 1&frasl;12 1&frasl;12 1&frasl;12 1&frasl;12 One column Example 1&frasl;12 Code snippet Two columns Example 2&frasl;12 Code snippet Three columns [&hellip;]<\/p>\n","protected":false},"author":3357,"featured_media":0,"parent":1408,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"page-templates\/no-sidebars.php","meta":{"_bu_prepress_primary_term":"","_bu_prepress_primary_term_manual":""},"bu-publication":[],"_links":{"self":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/wp-json\/wp\/v2\/pages\/1403"}],"collection":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/wp-json\/wp\/v2\/users\/3357"}],"replies":[{"embeddable":true,"href":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/wp-json\/wp\/v2\/comments?post=1403"}],"version-history":[{"count":4,"href":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/wp-json\/wp\/v2\/pages\/1403\/revisions"}],"predecessor-version":[{"id":1410,"href":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/wp-json\/wp\/v2\/pages\/1403\/revisions\/1410"}],"up":[{"embeddable":true,"href":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/wp-json\/wp\/v2\/pages\/1408"}],"wp:attachment":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/wp-json\/wp\/v2\/media?parent=1403"}],"wp:term":[{"taxonomy":"bu-publication","embeddable":true,"href":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/wp-json\/wp\/v2\/bu-publication?post=1403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}