Return to Wildland Fire
Return to Northern Bobwhite site
Return to Working Lands for Wildlife site
Return to Working Lands for Wildlife site
Return to SE Firemap
Return to the Landscape Partnership Literature Gateway Website
return
return to main site
You are here: Home / Equity and Inclusion Style Guide / Layout Options

Layout Options

Working with columns and flexible grid blocks.

Column Layout Options

Column layouts work best when they are wrapped in a [div class="row"] tag. This keeps the layout from stacking in unexpected ways. Switch to HTML view to start a column layout and make sure you are working inside a new row.

 

Two Column - Useful when adding large amounts of text. Text will flow automatically into columns.

Lorem ipsum dolor sit amet, eos ut delicata molestiae definiebas, erat qualisque ius no. Ubique eleifend vim ei, te eos tempor corrumpit. Id per magna officiis gubergren, est eu alii paulo viderer. Ne sit nobis albucius suscipit, et mea latine eripuit sensibus. Est ad modus ullum. Eum reque aliquam euripidis at. Ea mel tempor minimum recteque, magna nemore phaedrum usu ea. Eam ei discere oporteat.

Sit homero omittam ne. Ea accusata dissentiunt eos, est agam periculis theophrastus ea. At cum quando dictas praesent, sea ea alia incorrupte. Per tritani gubergren ad.

Lorem ipsum dolor sit amet, in nam iusto assentior, vix natum inermis facilis ei. Ea mandamus elaboraret cum. An sale dissentiet eum, aliquip splendide quo ei, in eos dolorum adipiscing. Ius tollit senserit te. Pro ad odio omnesque, sed ad odio maiorum pertinax, ea nisl movet philosophia vel. At duo tota dolores, cu eos ignota causae.

Accusata comprehensam id pri, usu an elit delectus. Sea ne alienum delectus. Soluta mucius ullamcorper ad vim, at facer indoctum patrioque nec. Sea at meliore suavitate, liber legendos has ne. Dicam essent id duo, melius interpretaris sea ad. Vix eu commune temporibus ullamcorper, sea ne cibo reque.

Three Column - Text auto-flows from column to column. Lorem ipsum dolor sit amet, eos ut delicata molestiae definiebas, erat qualisque ius no. Ubique eleifend vim ei, te eos tempor corrumpit. Id per magna officiis gubergren, est eu alii paulo viderer. Ne sit nobis albucius suscipit, et mea latine eripuit sensibus. Est ad modus ullum. Eum reque aliquam euripidis at. Ea mel tempor minimum recteque, magna nemore phaedrum usu ea. Eam ei discere oporteat.

Sit homero omittam ne. Ea accusata dissentiunt eos, est agam periculis theophrastus ea. At cum quando dictas praesent, sea ea alia incorrupte. Per tritani gubergren ad.


Advanced Layouts using Grid Layout

The styles below are not available in the WYSIWYG editor. Must have advanced knowledge of HTML and be comfortable working in html view to implement these layouts.

[div class="grid-container-2col"]

Grid-item one - added "greybox" class to see edges.

Grid-item two - added "greybox" class to see edges

[div class="grid-container-3col"]

Grid-item one - added "greybox" class to see edges.

Grid-item two - added "greybox" class to see edges

Grid-item three - added "greybox" class to see edges

[div class="grid-container-4col"]

Grid-item one - added "greybox" class to see edges.

Grid-item one - added "greybox" class to see edges.

Grid-item one - added "greybox" class to see edges.

Grid-item one - added "greybox" class to see edges.

Layout with Bootstrap span tags

Two column layout

[div class="span6"]

[div class="span6"]

Three column

[div class="span4"]

[div class="span4"]

[div class="span4"]