===== Web =====
==== Bootstrap ====
=== Bootstrap5 ===
== What's New ==
  * 6 breakpoints: xs, sm, md, lg, xl, xxl
  * Gutter classes: ''.g-*'', ''.gx-*'' and ''.gy-*'' (inclduing ''.g-0'')
  * Negative margin (disabled by default): ''.mn-*''
  * RTL languages support have impact:
    * ''...-left'' and ''...-right'' are renamed to ''...-start'' and ''...-end'' (e.g. ''.border-start'', ''text-md-end'', ...)
    * Margin and padding classes changed from ''.*l-*'' and ''.*r-*'' to ''.*s-*'' and ''.*e-*''
    * ''.text-left'' and ''.text-right'' are changed to ''.text-start'' and ''.text-end''
  * ''<thead>'' and ''<tfoot>'' can have ''.table-light'' or ''.table-dark'' classes
  * Use ''.bg-'' on checkboxes and radio buttons to change color, e.g. <code>
<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>
</code>
  * 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'')
== Other useful things to know ==
  * ''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