Skip navigation

Bootstrap Cheat Sheet

Bootstrap Cheat Sheet

Our cheat sheet below builds on Bootstrap's excellent documentation, zooming in on our particular customizations ( colors and spacing, namely ). If you are looking for other docs, here's a list of good Bootstrap topics, for convenience:

Background & Text Colors

Bootstrap builds out a bunch of helper classes based on our set colors. Setting background colors follows a predictable bg-{color} format. Setting text uses text-{color}. See the specimens below for examples of both:

<p class="bg-primary text-white">I have .bg-primary and .text-white</p>

I have .bg-primary and .text-white

<p class="bg-secondary text-white">I have .bg-secondary and .text-white</p>

I have .bg-secondary and .text-white

<p class="bg-success text-white">I have .bg-success and .text-white</p>

I have .bg-success and .text-white

<p class="bg-danger text-white">I have .bg-danger and .text-white</p>

I have .bg-danger and .text-white

<p class="bg-warning text-white">I have .bg-warning and .text-white</p>

I have .bg-warning and .text-white

<p class="bg-info text-white">I have .bg-info and .text-white</p>

I have .bg-info and .text-white

<p class="bg-light text-black">I have .bg-light and .text-black</p>

I have .bg-light and .text-black

<p class="bg-black text-white">I have .bg-black and .text-white</p>

I have .bg-black and .text-white

<p class="bg-white text-black">I have .bg-white and .text-black</p>

I have .bg-white and .text-black

Padding and Margins / Spacing

The code for adding both padding and margins is nearly interchangeable. See the Bootstrap documentation on spacing notation for full details.


Padding adds extra space inside an element.

<p class="bg-secondary p-1">I'm a <p> tag with p-1</p>

I'm a <p> tag with p-1

<p class="bg-secondary p-2">I'm a <p> tag with p-2</p>

I'm a <p> tag with p-2

<p class="bg-secondary p-3">I'm a <p> tag with p-3</p>

I'm a <p> tag with p-3

<p class="bg-secondary p-4">I'm a <p> tag with p-4</p>

I'm a <p> tag with p-4

<p class="bg-secondary p-5">I'm a <p> tag with p-5</p>

I'm a <p> tag with p-5

<p class="bg-secondary p-8">I'm a <p> tag with p-8</p>

I'm a <p> tag with p-8


Margins add extra space outside the element.

<p class="bg-secondary m-1">I'm a <p> tag with m-1</p>

I'm a <p> tag with m-1

<p class="bg-secondary m-2">I'm a <p> tag with m-2</p>

I'm a <p> tag with m-2

<p class="bg-secondary m-3">I'm a <p> tag with m-3</p>

I'm a <p> tag with m-3

<p class="bg-secondary m-4">I'm a <p> tag with m-4</p>

I'm a <p> tag with m-4

<p class="bg-secondary m-5">I'm a <p> tag with m-5</p>

I'm a <p> tag with m-5

<p class="bg-secondary m-8">I'm a <p> tag with m-8</p>

I'm a <p> tag with m-8

Padding vs. Margin

It's helpful to think of each element ( a column, a paragraph, a row, an image; everything ! ) as a box, with its own dimensions.

Simply put: padding will add that space inside the box, whereas margins are on the outside. This becomes most relevant where background colors are set, so check out this example for the difference:

<p class="bg-warning p-5">I'm a <p> tag, with p-5</p>

I'm a <p> tag, with p-5

<p class="bg-warning m-5">I'm a <p> tag, with m-5</p>

I'm a <p> tag, with m-5

One subtle distinction worth highlighting — margins also collapse. So two elements, each with margins set, contacting eachother, will condense down to one.

<p class="bg-warning m-5">I'm a <p> tag, with m-5</p><p class="bg-warning m-5">I'm another <p> tag, with m-5</p>

I'm a <p> tag, with m-5

I'm another <p> tag, with m-5

Both have margins set, and by design these won't stack to make e.g. an m-10 sized gap between them.

Padding on the other hand, is additive:

<p class="bg-warning p-5">I'm a <p> tag, with p-5</p><p class="bg-warning p-5">I'm another <p> tag, with p-5</p>

I'm a <p> tag, with p-5

I'm another <p> tag, with p-5

Both paddings come through ( with some extra margin between them, because that's what the default styles include ).

Certainly no reason you can't combine the two, but there you have it!

Design & Style Guide


Headings and the logotype are in JetBrains mono, a free & open source typeface available at

Body text and anything that requires more lengthy reading is in Linux Biolinum, which is also free & open source and can be downloaded from

The logotype above embodies several elements of scientist rebellion:

  • the warming stripes, a strong visual reminder of the climate crisis
  • monospace type in lower case, remeniscent of computer programming: a key element in many scientific disciplines, particularly climate modelling
  • the trailing underscore: again, a nod to computer programming and the hacks that allow leaked documents into the public domain

The logotype can be constructed using the typeface and warming stripes graphic, or downloaded as a single image file or an animated gif.


Our key visual design element, in combination with the warming stripes, is half-tone, black-and-white images from photographs. Half-tone imitates cheap newsprint images and is composed of small black and white dots.

Several basic images in half-tone are provided here, and details are provided of a few methods to make your own half-tone graphics.


Colours are taken from the warming stripes graphic. Primary colours are indicated with asterisks, and their hex codes are given. Non-asterisked colours are secondary colours. The original warming stripes were created by Ed Hawkins and are shared by a CC BY 4.0 license, and can be found and customised by location at

Primary: #022c6b
Secondary: #44b9ff
Success: #0059b4
Danger: #e13422
Warning: #fb6a49
Info: #1a77f2
Light: #f8f9fa
Dark: #212529

Halftone Images

I've borrowed from a Codepen to create a pretty decent first crack at halftone images. Just wrap it in a div with this class attached:

<div class="halftone">
<img src="" class="img-fluid" />