StackCP Bootstrap 5 Update Guide

As part of keeping StackCP modern and future-proof, we’re upgrading the underlying framework from Bootstrap 4 to Bootstrap 5.

If you’ve added custom CSS to your StackCP theme, some class names and structures have changed between versions. That means your custom styles may not apply as expected once the update goes live.

To help you prepare, we’ve outlined the most common breaking changes below. If your CSS uses any of these classes, you’ll need to update them to their new Bootstrap 5 equivalents. If you don’t see any of these in your customisations, you’re unlikely to be affected. You can update your custom CSS from the StackCP Appearence page in My20i.

1) Directional utilities

What’s Changed: Classes like .ml-*, .mr-*, .pl-*, .pr-*, float-left, float-right, text-left, text-right, border-left, border-right, rounded-left, and rounded-right are now logical (start/end).  
How to Fix:

• .ml-3 → .ms-3
• .mr-3 → .me-3
• .pl-2 → .ps-2
• .pr-2 → .pe-2
• float-right → float-end
• text-left → text-start
• border-right → border-end
• rounded-left → rounded-start

2) Input group wrappers

What’s Changed: .input-group-append and .input-group-prepend wrappers have been removed.  
How to Fix:

• Place .input-group-text and .btn directly inside .input-group.
• Update selectors to .input-group > .input-group-text or .input-group > .btn.

3) Custom form controls

What’s Changed: .custom-select, .custom-file, .custom-range, and .custom-control-* are replaced with new form classes.  
How to Fix:

• .custom-select → .form-select
• .custom-file → input[type=file].form-control + .form-label
• .custom-range → .form-range
• .custom-control-* → .form-check / .form-switch

4) Accessibility helpers

What’s Changed: .sr-only and .sr-only-focusable renamed.  
How to Fix:

• .sr-only → .visually-hidden
• .sr-only-focusable → .visually-hidden-focusable

5) Close button

What’s Changed: The .close class has been replaced by .btn-close.  
How to Fix: Use <button type="button" class="btn-close" ...> instead.

6) Dropdown alignment

What’s Changed: .dropdown-menu-right and .dropdown-menu-left have been renamed.  
How to Fix:

• .dropdown-menu-right → .dropdown-menu-end
• .dropdown-menu-left → .dropdown-menu-start

7) Responsive embeds

What’s Changed: .embed-responsive and .embed-responsive-16by9 (and similar) are replaced.  
How to Fix:

• .embed-responsive → .ratio
• .embed-responsive-16by9 → .ratio-16x9

8) Badges

What’s Changed: .badge-pill has been removed, and contextual badge classes (.badge-primary, etc.) have changed.  
How to Fix:

• .badge-pill → .rounded-pill
• .badge-primary (and similar) → .badge.bg-primary or .badge.text-bg-primary

9) Legacy layout helpers

What’s Changed: .no-gutters, .form-row, .card-deck, and .media have been removed.  
How to Fix:

• .no-gutters → .g-0 / .gx-0 / .gy-0
• .form-row → .row
• .card-deck → .row + .col
• .media → .d-flex + .align-items-*

10) Buttons and table headers

What’s Changed: .btn-block, .thead-light, and .thead-dark have been replaced.  
How to Fix:

• .btn-block → .w-100 (or .d-grid .btn)
• .thead-light / .thead-dark → .table-light / .table-dark