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
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.
- The card-based accordion ID is replaced with a new accordion component.
- In the default popover template, renamed.arrow to.popover-arrow.
- In the default tooltip template, renamed.arrow to.tooltip-arrow.
- While opening a modal, pass 'fullscreen': 'sm' as part of NgbModalOptions to ensure that the modal takes full screen height in mobile devices.