Prerequisites

Load Bootstrap 5

New

Supported browsers

Bootstrap supports the latest, stable releases of all major browsers and platforms. Internet Explorer is NOT supported!

Responsive Font Sizes

Bootstrap’s resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices.

The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into calc() functions with a mix of rem and viewport units to enable the responsive scaling behavior.

Helpers

Stretched link

Make any HTML element (except tables) or Bootstrap component clickable by “stretching” a nested link via CSS.

Card with stretched link

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Add this class to the link element:

stretched-link

Utilities

Layout
  • Added .d-grid to display utilities
  • Added new gap utilities (.gap) for CSS Grid layouts

Changed

Accessibility

Visually hidden content
  • Replaced .sr-only with .visually-hidden.

Utilities

Left and Right
  • Renamed .left-* and .right-* to .start-* and .end-*.
  • Renamed .float-left and .float-right to .float-start and .float-end.
  • Renamed .border-left and .border-right to .border-start and .border-end.
  • Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end.
  • Renamed .ml-* and .mr-* to .ms-* and .me-*.
  • Renamed .pl-* and .pr-* to .ps-* and .pe-*.
  • Renamed .text-left and .text-right to .text-start and .text-end.

Removed

Classes

  • Removed .border-0

Components

  • Removed .jumbotron
  • Removed .media

JavaScript

  • Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.

Reference

Migration