layout-1up #sectionid-100 bs4a5
One box in a wrapper div with a unique id
.layout-1up .content-block:nth-child(1)
.layout-1up .content-block:nth-child(2) this is a new row with a margin-bottom override on the layout-* class
layout-2up #sectionid-200
Two equal boxes in a wrapper div with a unique id
.layout-2up .content-block:nth-child(1)
.layout-2up .content-block:nth-child(2)
layout-leftnav #sectionid-300
Two unequal boxes (leftnav) in a wrapper div with a unique id
.layout-leftnav .content-block:nth-child(1)
.layout-leftnav .content-block:nth-child(2)
.layout-leftnav .content-block:nth-child(3)
.layout-leftnav .content-block:nth-child(4)
Nesting this grid demo
Add new "layout-*" div with additional "flexit" class, new CSS needs to be written for small screen stack
.layout-leftnav .layout-3up .content-block:nth-child(1)
.layout-leftnav .layout-3up .content-block:nth-child(2)
.layout-leftnav .layout-3up .content-block:nth-child(3)
.layout-leftnav .layout-3up .content-block:nth-child(4)
.layout-leftnav .layout-3up .content-block:nth-child(5)
.layout-leftnav .layout-3up .content-block:nth-child(6)
Nesting default bootstrap grid demo
Works, must wrap in "flexit" div, new CSS needs to be written for small screen stack - NOTE: default bootstrap "col-*" classes do not have gutters
.layout-leftnav .col-md-4.content-block:nth-child(1)
.layout-leftnav .col-md-4.content-block:nth-child(2)
.layout-leftnav .col-md-4.content-block:nth-child(3)
layout-rightnav #sectionid-400
Two unequal boxes (rightnav displayed by changing order of content-blocks in css, layout-rightnav style is a duplicate but otherwise the same as layout-leftnav) in a wrapper div with a unique id
.layout-rightnav .content-block:nth-child(1)
.layout-rightnav .content-block:nth-child(2)
.layout-rightnav .content-block:nth-child(3)
.layout-rightnav .content-block:nth-child(4)
layout-leftnav-narrow #sectionid-500
Main content and aside with wider nav and smaller main content 3-8, "justify-content: space-between;" provides the gutter
.layout-leftnav-narrow .content-block:nth-child(1)
content-blocks re-orderable in css
layout-leftnav-narrow .content-block:nth-child(2)
layout-rightnav-narrow #sectionid-600
Main content and aside with wider nav and smaller main content 8-3 - same as layout-leftnav-narrow but columns flipped in css
.layout-rightnav-narrow .content-block:nth-child(1)
content-blocks re-orderable in css
layout-rightnav-narrow .content-block:nth-child(2)
layout-3up #sectionid-700 (this is optional component title) and more words what happens here
Three equal-width boxes in a wrapper div with a unique id (this is optional dek or description) and more words what happens here
.layout-3up .content-block:nth-child(1)
content-blocks re-orderable in css BUT NOTE the effect it has on coloring when nth-child(Xn+Y) is in use
layout-3up .content-block:nth-child(2)
layout-3up .content-block:nth-child(3)
.layout-3up .content-block:nth-child(4) this is a new row
layout-3up .content-block:nth-child(5)
layout-3up .content-block:nth-child(6)
layout-3-6-3 #sectionid-800
Three unequal-width boxes in a wrapper div with a unique id. Boxes can be left blank on sides to center text content
.layout-3-6-3 .content-block:nth-child(1)
content-blocks re-orderable in css
layout-3-6-3 .content-block:nth-child(2)
layout-3-6-3 .content-block:nth-child(3)
layout-3-7-2 #sectionid-900
Three unequal-width boxes in a wrapper div with a unique id. Along with container-fluid (full width option), this is used for DoITT technical documentation with navigation on both sides of main text content
.layout-3-7-2 .content-block:nth-child(1)
content-blocks re-orderable in css
layout-3-7-2 .content-block:nth-child(2)
layout-3-7-2 .content-block:nth-child(3)
.layout-3-7-2 .content-block:nth-child(4)
layout-3-7-2 .content-block:nth-child(5)
layout-3-7-2 .content-block:nth-child(6)
layout-2-8-2 #sectionid-1000
Two small equal-width boxes with a large center content area
.layout-2-8-2 .content-block:nth-child(1)
content-blocks re-orderable in css
layout-2-8-2 .content-block:nth-child(2)
layout-2-8-2 .content-block:nth-child(3)
.layout-2-8-2 .content-block:nth-child(4) this is a new row
layout-2-8-2 .content-block:nth-child(5)
layout-2-8-2 .content-block:nth-child(6)
layout-4up #sectionid-1100
Four equal-width boxes in a wrapper div with a unique id
.layout-4up .content-block:nth-child(1)
content-blocks re-orderable in css
layout-4up .content-block:nth-child(2)
layout-4up .content-block:nth-child(3)
.layout-4up .content-block:nth-child(4)
layout-5up #sectionid-1200
Five equal-width boxes in a wrapper div with a unique id
.layout-5up .content-block:nth-child(1)
layout-5up .content-block:nth-child(2)
layout-5up .content-block:nth-child(3)
.layout-5up .content-block:nth-child(4)
.layout-5up .content-block:nth-child(5)
layout-6up #sectionid-1300
Six equal-width boxes in a wrapper div with a unique id
.layout-6up .content-block:nth-child(1)
layout-6up .content-block:nth-child(2)
layout-6up .content-block:nth-child(3)
.layout-6up .content-block:nth-child(4)
.layout-6up .content-block:nth-child(5)
.layout-6up .content-block:nth-child(6)