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
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)
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)
.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)
.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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)