Skip to content

assets: Upgrade Bootstrap from 4.6 to 5.3 and AdminLTE from 3.2 to 4.0

Antoine Lambert requested to merge anlambert/swh-web:upgrade-admin-lte-and-bootstrap into master

The bootstrap admin theme we are using (AdminLTE) recently added support for bootstrap 5.x in its 4.0 release (still in beta but works for our needs).

So it was time to upgrade bootstrap from 4.x to 5.x for the SWH webapp.

The following was made to complete the upgrade while keeping same look and feel as before:

  • remove use of bootstrap loader for webpack and simplify webpack configuration

  • replace use of deprecated node-sass package by sass one from Dart

  • update bootstrap sass variables to override and add button style matching the default one from AdminLTE 3.x we were using

  • adapt some CSS rules and add new ones to ensure same look and feel as before

  • remove explicit use of custom form controls from bootstrap 4.x as they are now the standard in bootstrap 5.x through new CSS classes form-*

  • update CSS classes renamed in bootstrap 5.x and adminlte 4.x, notably:

    • wrapper => app-wrapper
    • main-header => app-header
    • content => app-content
    • sidebar => app-sidebar
    • footer => app-footer
    • ml-auto => ms-auto
    • mr-auto => me-auto
    • float-left => float-end
    • float-right => float-start
    • text-left => text-start
    • text-right => text-end

  • rename some data-* attributes to data-bs-*

  • use btn-secondary CSS class for button style instead of btn-default

  • use standard bootstrap close button for modals and alerts

  • put sidebar HTML code in its own dedicated include file

  • simplify forms HTML code and use new form-label CSS class

  • remove no longer needed javascript hacks

  • improve color theme consistency notably when focusing elements with keyboard

Before (Bootstrap 4.6 + AdminLTE 3.2): image

After (Bootstrap 5.3 + AdminLTE 4.0): image

Merge request reports