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-4

col-xs-3

col-xs-2

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.

Cannabis Legalization

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

<section class="col-xs-12 col-sm-4">
    <div class="feature-image">
      <a href="https://novascotia.ca/postalservice/"><img src="https://news.novascotia.ca/sites/default/files/features/homepage/Post%20Disruption%20Website.jpg" class="responsive" alt="Close up of a pen as someone fills out a form" typeof="foaf:Image"/></a>
    </div>
    <h2><a href="http://beta.novascotia.ca/news-and-events/kidney-disease-never-too-early-to-prevent/">Possible Postal Services Disruption</a></h2>
    <div class="feature-caption">
      <p>Canada Post service may be disrupted. If that happens, the province has a plan in place for provincial government correspondence.</p>
    </div>
  </section>

<section class="col-xs-12 col-sm-4">
    <div class="feature-image">
      <a href="https://novascotia.ca/news/release/?id=20181031001"><img src="https://news.novascotia.ca/sites/default/files/features/homepage/tree_57Q9676_0.jpg" class="responsive" alt="Teresa Simpson and Ross McKellar, pose in front of the tree they donated to the province." typeof="foaf:Image"/></a>
    </div>
    <h2><a href="https://novascotia.ca/news/release/?id=20181031001">Oxford Tree Bound for Boston</a></h2>
    <div class="feature-caption">
      <p>Nova Scotia’s annual Christmas tree gift to Boston is coming from Cumberland County for the first time.</p>
    </div>
  </section>

<section class="col-xs-12 col-sm-4">
    <div class="feature-image">
      <a href="https://novascotia.ca/cannabis/"><img src="https://news.novascotia.ca/sites/default/files/features/homepage/cannabis.jpg" class="responsive" alt="Bicycle leaning against a building" typeof="foaf:Image"/></a>
    </div>
    <h2><a href="https://novascotia.ca/cannabis/">Cannabis Legalization</a></h2>
    <div class="feature-caption">
      <p>Know the laws. Understand the risks. Use cannabis responsibly. Be in the know.</p>
    </div>
  </section>

</div>

feature-story-grid.html