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)

Translate »