About cookies on this site Our websites require some cookies to function properly (required). In addition, other cookies may be used with your consent to analyze site usage, improve the user experience and for advertising. For more information, please review your options. By visiting our website, you agree to our processing of information as described in IBM’sprivacy statement. To provide a smooth navigation, your cookie preferences will be shared across the IBM web domains listed here.
General Page
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
- The card-based accordion ID is replaced with a new accordion component.
- 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.
- Accordion
[{"Type":"MASTER","Line of Business":{"code":"LOB59","label":"Sustainability Software"},"Business Unit":{"code":"BU059","label":"IBM Software w\/o TPS"},"Product":{"code":"SSGTZV","label":"IBM Sterling Store Engagement"},"ARM Category":[{"code":"a8m0z000000cy2QAAQ","label":"Call Center Store and SIM"}],"Platform":[{"code":"PF025","label":"Platform Independent"}],"Version":"All Versions"}]
Was this topic helpful?
Document Information
More support for:
IBM Sterling Store Engagement
Component:
Call Center Store and SIM
Software version:
All Versions
Document number:
6601273
Modified date:
05 July 2022
UID
ibm16601273
Manage My Notification Subscriptions