6 breakpoints: xs, sm, md, lg, xl, xxl

Gutter classes: .g-*, .gx-* and .gy-* (inclduing .g-0)

Negative margin (disabled by default): .mn-*

<thead> and <tfoot> can have .table-light or .table-dark classes

Use .bg- on checkboxes and radio buttons to change color, e.g.

<div class="form-check">
  <input class="form-check-input bg-success" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

Use .link-* for colored links

Use .user-select-all to have a whole element (e.g. paragraph) selected when clicked

.lh-* for line-height (.lh-1, .lh-sm, .lh-base, .lh-lg)

role="button" to change cursor into pointer for an element (not needed for <button>)

responsive images: .img-fluid

1px border around images: .img-thumbnail

.form-control-plaintext for <input readonly> form fields

color-picker: <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

<button>s within a <form> default to type="submit", so strive to be specific and always include a type

Cards have no margin by default

Easily clear floats by adding .clearfix to the parent element.

Add .stretched-link to a link to make its containing block clickable

.border-1 to .border-5 to specify border width

.rounded-circle and .rounded-pill to create a circle or pill border

.text-reset to inherit color from parent (e.g. with links)

Use <kbd> to show keystrokes

Use <abbr title="…"> to show abbreviations

Use fixed-top or fixed-bottom to fix an element to the top or bottom

Use text-truncate to truncate long text

Use <div class="vr"></div> to create a vertical rule