You are here: start » web » bootstrap » bootstrap5

This is an old revision of the document!

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. 
    <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)
  • 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
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)