Grid system

We use the Bootstrap grid system.

We design mobile first and work up from there.

Bootstrap is based on a 12 column grid, and has four basic breakpoints:

  • xs (smallest screen) 480px
  • sm (small screen) 768px
  • md (medium screen) 992px
  • lg (large screen) 1200px

For page content, we keep the width of the content area at a comfortable reading width that works out to be: col-xs-12 col-md-8. For examples, please refer to the Page Patterns.

col-xs-12
col-xs-6
col-xs-6
col-xs-4
col-xs-4
col-xs-4
col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-2
col-xs-2
col-xs-2
col-xs-2
col-xs-2
col-xs-2
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1

Grid layout examples

Close up of a pen as someone fills out a form

Possible Postal Services Disruption

Canada Post service may be disrupted. If that happens, the province has a plan in place for provincial government correspondence.

Teresa Simpson and Ross McKellar, pose in front of the tree they donated to the province.

Oxford Tree Bound for Boston

Nova Scotia’s annual Christmas tree gift to Boston is coming from Cumberland County for the first time.

Bicycle leaning against a building

Cannabis Legalization

Know the laws. Understand the risks. Use cannabis responsibly. Be in the know.

feature-story-grid.html