Grid

Open in Storybook Open in Figma

George adheres to the grid of Bootstrap (BS), in particular version 4 and version 5.

DEPRECATED George legacy code may still refer to the BS3 naming convention for tiers. Back then there were only four tiers instead of those described below. On top of that, they differ from the BS4 tiers, e.g. BS3 medium = BS4 large.

Tiers and breakpoints

George uses the five tiers from BS4, and the six tiers from BS5. BS4 is the default, BS5 (which is identical with BS4, but additionally adds XXL) is opt-in.

The outer gutter width in each tier is 2× 15px, hence the maximum content width is always 30px less than the actual grid width.

HINT XXL is always present in the code, but it behaves like XL. To opt in, set useBs5Grid in ThemeProvider, which adds the .g-bs5-grid modifier class to the .g-bootstrap wrapper.

html<!-- At screen sizes of 1400px and larger, the following applies: -->
<div class="g-bootstrap g-[theme]">
  <div class="container"><!-- has same `max-width` as XL, which is 1110px. --></div>
</div>
<div class="g-bootstrap g-[theme] g-bs5-grid">
  <div class="container"><!-- has the XXL `max-width`, which is 1290px. --></div>
</div>

There are also extended widths for the the XL and XXL breakpoints available.

HINT To opt in, set useExtendedGrid in ThemeProvider which adds the .g-extended-grid modifier class to the .g-bootstrap wrapper.

Base font size

All George styles are based on rem units. We use 16px as the root design size for 1rem, and those 16px are also the font size across all tiers. Earlier versions of George had different font sizes per tier, but in early 2018 this has been streamlined, so the font size is now the same everywhere.

In style rule boxes throughout the GDS you will find pixel values for sizes/margins/paddings etc., but in reality rem is always used (1rem=16px) with only one exception:

• Media query breakpoints use px instead of em, as defined in the Bootstrap grid implementation (see chapter above).