Working examples

This is not a Government of Canada website

The purpose of this website is to provide a working example of the WET-BOEW-Moodle theme created by TNG Consulting Inc. together with the Government of Canada. Demo courses are only available in English however multi-language courses are supported.

Grid System

Style guide information

Basic grid row

Appearance
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Fluid container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mobile and Desktop

Appearance
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mobile, tablet, desktop

Appearance
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Responsive column resets

Appearance
.col-xs-6 .col-sm-3
Resize the viewport or check it out on a cell phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offsetting columns

Appearance
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

Nesting columns

Appearance

Level 1: .col-md-9

Level 2: .col-md-6
Level 2: .col-md-6

Column ordering

Appearance
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
Last modified: Thursday, 22 August 2019, 6:10 PM
Date modified: