Migrating from bootstrap version 4 to version 5

Migrating from bootstrap version 4 to version 5
This document guides you in migrating your customizations from bootstrap version 4 to version 5. Review the changes and update your custom component scss and html files.
Before you begin
Read and understand bootstrap and ng-bootstrap migration documentation.

Prerequisite

Ensure that you set up UI middleware. Currently, download the middleware that is needed for the development of Sterling Store Engagement.
The following changes are made. Therefore, update your custom component scss and html files, if necessary.
  • Renamed classes
    • 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
    • For brevity and consistency, renamed .font-weight-* utilities to .fw-*
    • For buttons, renamed w-xs-100 to w-sm-100 so that the buttons take full width in mobile devices
    • In forms, renamed .custom-select to .form-select, which is used in date-picker
  • Media query mixins parameters are changed to a more logical approach.
    • media-breakpoint-down() uses the breakpoint itself instead of the next breakpoint. For example, media-breakpoint-down(lg) instead of media-breakpoint-down(md) targets viewports smaller than lg.
    • The second parameter in media-breakpoint-between() also uses the breakpoint itself instead of the next breakpoint. For example, media-between(sm, lg) instead of media-breakpoint-between(sm, md) targets viewports between sm and lg.
  • Grid updates
    • For columns that do contain position:relative applied, you may have to add .position-relative to some elements to restore that behavior. For example, when using .position-absolute on an element inside columns.
    • For padding and width, 100% is applied to all the row>* selector. Therefore, use row only when a child element is a column. Otherwise, replace row class with d-flex flex-wrap.
  • Components
    • Accordion
    • Popovers
      • In the default popover template, renamed.arrow to.popover-arrow.
    • Tooltips
      • In the default tooltip template, renamed.arrow to.tooltip-arrow.
    • Modal
      • While opening a modal, pass 'fullscreen': 'sm' as part of NgbModalOptions to ensure that the modal takes full screen height in mobile devices.

Page Feedback