{"id":912,"date":"2015-01-20T14:31:24","date_gmt":"2015-01-20T19:31:24","guid":{"rendered":"http:\/\/id-demos.cms-devl.bu.edu\/responsive-framework\/?page_id=912"},"modified":"2020-08-28T11:57:02","modified_gmt":"2020-08-28T15:57:02","slug":"grid-classes","status":"publish","type":"page","link":"https:\/\/id-demos.cms-devl.bu.edu\/responsive-framework\/content\/grid-classes\/","title":{"rendered":"Grid Classes"},"content":{"rendered":"<p>If you&#8217;re comfortable editing HTML and have a good understanding of mobile-first responsive design, Responsive offers a number of grid classes to help build simple layouts in your content area.<\/p>\n<p>These classes work best with a No Sidebars Template. Some can be used in the default template as well.<\/p>\n<div class=\"row\">\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-1\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<h3>Three unequal columns<\/h3>\n<div class=\"row\">\n<div class=\"col-md-3\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-6\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-3\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<h3>Two columns<\/h3>\n<div class=\"row\">\n<div class=\"col-md-8\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<h3>Two columns with two nested columns<\/h3>\n<div class=\"row\">\n<div class=\"col-md-8\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<div class=\"row\">\n<div class=\"col-md-6\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-md-6\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-12\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"col-md-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<h3>Mixed: mobile and desktop<\/h3>\n<div class=\"row\">\n<div class=\"col-xs-12 col-md-8\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-xs-6 col-md-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-xs-6 col-md-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-xs-6 col-md-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-xs-6 col-md-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-xs-6 col-md-6\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-xs-6 col-md-6\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<h3>Mixed: mobile, tablet, and desktop<\/h3>\n<div class=\"row\">\n<div class=\"col-xs-12 col-sm-8 col-lg-8\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-xs-6 col-sm-4 col-lg-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-xs-6 col-sm-4 col-lg-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-xs-6 col-sm-4 col-lg-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-xs-6 col-sm-4 col-lg-4\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-xs-6 col-sm-6 col-lg-6\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-xs-6 col-sm-6 col-lg-6\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<div class=\"col-xs-6 col-sm-6 col-lg-6\">\n<h4>Heading Here<\/h4>\n<p>Lorem ipsum dolar sit anuit amok time.<\/p>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-4\">.col-md-4<\/div>\n<div class=\"col-md-4\">.col-md-4<\/div>\n<div class=\"col-md-4\">.col-md-4<\/div>\n<\/div>\n<h3>Three unequal columns<\/h3>\n<p>Get three columns <strong>starting at desktops and scaling to large desktops<\/strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.<\/p>\n<div class=\"row\">\n<div class=\"col-md-3\">.col-md-3<\/div>\n<div class=\"col-md-6\">.col-md-6<\/div>\n<div class=\"col-md-3\">.col-md-3<\/div>\n<\/div>\n<h3>Two columns<\/h3>\n<p>Get two columns <strong>starting at desktops and scaling to large desktops<\/strong>.<\/p>\n<div class=\"row\">\n<div class=\"col-md-8\">.col-md-8<\/div>\n<div class=\"col-md-4\">.col-md-4<\/div>\n<\/div>\n<h3>Full width, single column<\/h3>\n<p>No grid classes are necessary for full-width elements.<\/p>\n<h3>Two columns with two nested columns<\/h3>\n<p>Per the documentation, nesting is easy\u2014just put a row of columns within an existing row. This gives you two columns <strong>starting at desktops and scaling to large desktops<\/strong>, with another two (equal widths) within the larger column.<\/p>\n<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.<\/p>\n<div class=\"row\">\n<div class=\"col-md-8\">\n<p>.col-md-8<\/p>\n<div class=\"row\">\n<div class=\"col-md-6\">.col-md-6<\/div>\n<div class=\"col-md-6\">.col-md-6<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-12\">.col-md-6<\/div>\n<\/div>\n<\/div>\n<div class=\"col-md-4\">.col-md-4<\/div>\n<\/div>\n<h3>Mixed: mobile and desktop<\/h3>\n<p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.<\/p>\n<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.<\/p>\n<div class=\"row\">\n<div class=\"col-xs-12 col-md-8\">.col-xs-12 .col-md-8<\/div>\n<div class=\"col-xs-6 col-md-4\">.col-xs-6 .col-md-4<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-xs-6 col-md-4\">.col-xs-6 .col-md-4<\/div>\n<div class=\"col-xs-6 col-md-4\">.col-xs-6 .col-md-4<\/div>\n<div class=\"col-xs-6 col-md-4\">.col-xs-6 .col-md-4<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-xs-6 col-md-6\">.col-xs-6 .col-md-6<\/div>\n<div class=\"col-xs-6 col-md-6\">.col-xs-6 .col-md-6<\/div>\n<\/div>\n<h3>Mixed: mobile, tablet, and desktop<\/h3>\n<div class=\"row\">\n<div class=\"col-xs-12 col-sm-8 col-lg-8\">.col-xs-12 .col-lg-8<\/div>\n<div class=\"col-xs-6 col-sm-4 col-lg-4\">.col-xs-6 .col-lg-4<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-xs-6 col-sm-4 col-lg-4\">.col-xs-6 .col-sm-4 .col-lg-4<\/div>\n<div class=\"col-xs-6 col-sm-4 col-lg-4\">.col-xs-6 .col-sm-4 .col-lg-4<\/div>\n<div class=\"col-xs-6 col-sm-4 col-lg-4\">.col-xs-6 .col-sm-4 .col-lg-4<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-xs-6 col-sm-6 col-lg-6\">.col-xs-6 .col-sm-6 .col-lg-6<\/div>\n<div class=\"col-xs-6 col-sm-6 col-lg-6\">.col-xs-6 .col-sm-6 .col-lg-6<\/div>\n<div class=\"col-xs-6 col-sm-6 col-lg-6\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re comfortable editing HTML and have a good understanding of mobile-first responsive design, Responsive offers a number of grid classes to help build simple layouts in your content area. These classes work best with a No Sidebars Template. Some can be used in the default template as well. Heading Here Lorem ipsum dolar sit [&hellip;]<\/p>\n","protected":false},"author":1270,"featured_media":0,"parent":1861,"menu_order":1,"comment_status":"open","ping_status":"open","template":"page-templates\/no-sidebars.php","meta":[],"_links":{"self":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/responsive-framework\/wp-json\/wp\/v2\/pages\/912"}],"collection":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/responsive-framework\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/responsive-framework\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/id-demos.cms-devl.bu.edu\/responsive-framework\/wp-json\/wp\/v2\/users\/1270"}],"replies":[{"embeddable":true,"href":"https:\/\/id-demos.cms-devl.bu.edu\/responsive-framework\/wp-json\/wp\/v2\/comments?post=912"}],"version-history":[{"count":4,"href":"https:\/\/id-demos.cms-devl.bu.edu\/responsive-framework\/wp-json\/wp\/v2\/pages\/912\/revisions"}],"predecessor-version":[{"id":1896,"href":"https:\/\/id-demos.cms-devl.bu.edu\/responsive-framework\/wp-json\/wp\/v2\/pages\/912\/revisions\/1896"}],"up":[{"embeddable":true,"href":"https:\/\/id-demos.cms-devl.bu.edu\/responsive-framework\/wp-json\/wp\/v2\/pages\/1861"}],"wp:attachment":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/responsive-framework\/wp-json\/wp\/v2\/media?parent=912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}