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-*
  • …-left and …-right are renamed to …-start and …-end (to cope with RTL languages)
  • <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>
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.