| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| web:bootstrap:bootstrap5 [2021-01-02 09:45] – [What's New] admin | web:bootstrap:bootstrap5 [2023-10-28 21:42] (current) – [Other useful things to know] admin |
|---|
| * Gutter classes: ''.g-*'', ''.gx-*'' and ''.gy-*'' (inclduing ''.g-0'') | * Gutter classes: ''.g-*'', ''.gx-*'' and ''.gy-*'' (inclduing ''.g-0'') |
| * Negative margin (disabled by default): ''.mn-*'' | * Negative margin (disabled by default): ''.mn-*'' |
| * ''...-left'' and ''...-right'' are renamed to '...-start'' and ''...-end'' (to cope with RTL languages) | * 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 == | == Other useful things to know == |
| * ''role="button"'' to change cursor into pointer for an element (not needed for ''<button>'') | * ''role="button"'' to change cursor into pointer for an element (not needed for ''<button>'') |
| * responsive images: ''.img-fluid'' | * responsive images: ''.img-fluid'' |
| * 1px border around images: ''.img-thumbnail'' | * 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 |
| |