Layout
Do
- Use semantic HTML structure — Implement proper
container>row>colhierarchy to support screen reader navigation. - Plan mobile-first layouts — Design for the smallest screens first, then enhance for larger breakpoints.
- Maintain consistent spacing — Use Bootstrap’s spacing utilities and gap classes for uniform gutters.
- Test across breakpoints — Verify layouts work properly at all responsive breakpoints (
xs,sm,md,lg,xl,xxl). - Use appropriate column sizes — Ensure columns add up to 12 within each row for proper alignment.
- Implement logical content order — Arrange content in a meaningful sequence for keyboard and screen reader users.
- Consider content hierarchy — Use the grid to reinforce visual importance and reading flow.
Don’t
- Don’t skip container wrappers — Always wrap grid content in the appropriate container classes for alignment.
- Don’t create overly complex nested grids — Limit nesting depth to maintain code readability and performance.
- Don’t ignore mobile layouts — Ensure content remains accessible and usable on small screens.
- Don’t use fixed pixel widths — Rely on Bootstrap’s responsive column system instead of custom width declarations.
- Don’t break the 12-column rule — Avoid column combinations that exceed 12 units per row.
- Don’t forget about content overflow — Test with real content lengths to prevent layout breaking.
- Don’t sacrifice accessibility for design — Maintain logical tab order and screen reader compatibility.
Bootstrap Grid System
The Bootstrap Grid System provides a powerful, mobile-first flexbox grid for building responsive layouts.
Built on a 12-column structure with five responsive breakpoints, it offers flexible layout options for government websites.
For complete documentation and implementation details, refer to the Bootstrap Grid documentation and the Bootstrap Breakpoints guide.
Containers
Default Container
The standard container used in most layouts across the design system. Provides optimal content width and margins for typical page layouts, ensuring proper readability and visual hierarchy. This container maintains consistent maximum widths at each breakpoint while providing appropriate side margins for content presentation.
Small Container
A narrower container designed for components placed on landing pages where the main column width is not constrained by sidebar layouts. Maintains optimal line lengths for improved readability when content would otherwise span too wide on large screens. Ideal for focused content areas, forms, or promotional sections that benefit from tighter content boundaries.
Grid Examples
The examples below demonstrate the standard GNWT Design System page layout patterns using Bootstrap's grid system for organizing main content and sidebar areas. These examples show how to structure responsive layouts that adapt gracefully across different screen sizes while maintaining proper content hierarchy and accessibility standards.
Main Sidebar Layout
The example below is the GNWT Design System standard two-column layout with main content (8 columns) and sidebar (4 columns). Shows responsive behavior where columns stack on mobile devices and display side-by-side on larger screens. This layout is ideal for maintaining readable line-lengths and for pages with supplementary information.
For a detailed example, see the Basic Page pattern.
Responsive Grid
Gutters
Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.
How They Work
- Gutters are the gaps between column content, created by horizontal
padding. We setpadding-rightandpadding-lefton each column, and use negativemarginto offset that at the start and end of each row to align content. - Gutters default to
2rem(32px) wide. This allows us to match our grid to the padding and margin spacers scale. - Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.
Types of Gutters
- All-sides gutters:
.g-*classes (e.g.,.g-3,.g-5) apply spacing to both horizontal and vertical gaps. - Horizontal gutters:
.gx-*classes control left and right spacing between columns. - Vertical gutters:
.gy-*classes control top and bottom spacing between rows. - Responsive gutters: Add breakpoint prefixes (e.g.,
.g-sm-4,.gx-lg-6,.gy-xl-8) to adjust gutter spacing at specific screen sizes. - Gutter removal: Use
.g-0,.gx-0, or.gy-0to remove spacing entirely.
Responsive Gutters
The example below demonstrates how gutter spacing can be adjusted at different breakpoints using responsive gutter classes. It shows a simple example using .gx-3 and .gx-lg-6, where horizontal spacing starts small (1 rem) on mobile and increases to larger spacing (3 rem) on desktop screens, providing optimal spacing across different device sizes.
Advanced Responsive Gutters
This example shows more complex responsive gutter control using separate horizontal and vertical spacing classes (.gx-3, .gx-lg-7, .gy-7). It demonstrates how to independently control horizontal gutters that change from small to extra-large at the lg breakpoint, while maintaining consistent vertical spacing across all screen sizes.
Simple CSS Grid Utilities
The GNWT Design System includes custom CSS Grid utility classes that provide responsive, equal-width column layouts using native CSS Grid. These utilities complement Bootstrap's flexbox grid with simpler syntax and simpler HTML structure for common layout patterns:
.grid-columns-2: Creates a 2-column CSS Grid layout with equal-width columns..grid-columns-3: Creates a 3-column CSS Grid layout with equal-width columns..grid-columns-3-single-medium-down: Responsive modifier that collapses 3-column grid to single column on medium screens and below.- Gap utilities: Use Bootstrap's
.gap-*,.row-gap-*, and.column-gap-*classes for spacing control. - Responsive gaps: Apply breakpoint-specific spacing (e.g.,
.gap-6,.row-gap-xxl-7,.column-gap-xxl-9).
CSS Grid excels with equal-width, auto-flowing layouts with minimal markup, while Bootstrap Grid offers precise control over individual column widths, responsive behavior, and complex layout arrangements. Choose CSS Grid utilities for simple, consistent patterns and Bootstrap Grid for layouts requiring varied column sizes or specific responsive behaviors.
Note: The GNWT Design System has not opted-in to the usage of Bootstrap CSS Grid utility classes so they are unavailable out-of-the-box.
Responsive 3 Column CSS Grid
Demonstrates the .grid-columns-3 class combined with .grid-columns-3-single-medium-down for responsive behavior. Uses .gap-6 for base spacing, with enhanced spacing at larger breakpoints (.row-gap-xxl-7 .column-gap-xxl-9). Shows both full-width implementation and usage within sidebar layouts where the grid adapts to the constrained content area.
The Quick Links Grid Layout utilizes this approach to apply a grid to simple HTML structure.
2 Column CSS Grid
Shows the .grid-columns-2 class creating equal-width columns that automatically wrap content. Demonstrates consistent .gap-6 spacing and how the grid maintains its 2-column structure both in full-width containers and within sidebar-constrained layouts. Items flow naturally into the grid without requiring individual column classes.
Content Guidelines
- Logical content flow — Structure content in a meaningful order that makes sense when read linearly, regardless of visual layout.
- Responsive content strategy — Plan how content will adapt and potentially reorder across different screen sizes and devices.
- Consistent spacing patterns — Use standardized spacing values throughout layouts to create visual rhythm and hierarchy.
- Clear content relationships — Group related content together and use visual spacing to show relationships between sections.
Implementation Considerations
- CSS framework integration — Ensure Bootstrap grid classes don’t conflict with existing CSS frameworks or custom styles.
- Performance monitoring — Track layout shift metrics and loading performance to ensure an optimal user experience.
- Documentation standards — Maintain clear documentation of any custom grid modifications and responsive behavior patterns.
Accessibility Features
- Semantic structure — Use proper HTML landmarks and sectioning elements to support screen reader navigation.
- Keyboard navigation — Ensure all interactive grid content maintains a logical tab order regardless of visual column arrangement.
- Screen reader compatibility — Structure content so it reads logically with assistive technologies, following source order rather than visual layout.
- Focus management — Ensure focus indicators remain visible and properly positioned across all responsive breakpoints.
- Content reflow — Verify that layouts adapt to user zoom levels up to 400% while maintaining functionality and readability.