What’s new in Bootstrap 5

Here are some major point

1 Bootstrap no longer depends on jQuery

2. Dropped support for Internet Explorer (up to IE-11)

3. Updated forms element

4. Added one more breakpoint

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

5. Added RTL Support

6. added Theme colors support in SASS

7. Gutters

Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.

8. Responsive font sizes

Enabled responsive font sizes by default, allowing the text to scale more naturally across device and viewport sizes. Have a look at the RFS page to find out how this works.

9. Stretched link

10. Gap

When using display: grid, you can make use of gap utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a display: grid container). Gap utilities are responsive by default, and are generated via our utilities API, based on the $spacers Sass map.

11. Components

• Renamed .dropleft and .dropright to .dropstart and dropend.
• Renamed .dropdown-menu-*-left and .dropdown-menu-*-right to .dropdown-menu-*-start and .dropdown-menu-*-end.
• Renamed .bs-popover-left and .bs-popover-right to .bs-popover-start and .bs-popover-end.
• Renamed .bs-tooltip-left and .bs-tooltip-right to .bs-tooltip-start and .bs-tooltip-end.
• Renamed .carousel-item-left and .carousel-item-right to .carousel-item-start and .carousel-item-end.

12. Utilities

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

Breakpoints specific variants are consequently renamed too (eg. .text-md-start replaces .text-md-left).