feat: Initial Bootstrap 5 theme implementation - foundational UI port #2642

filippolauria · 2025-07-24T15:59:13Z

This PR provides a Bootstrap 5 port of the existing Bootstrap 4 theme, adapting Flask-Admin's UI components to work with Bootstrap 5 while maintaining some sort of backward compatibility.

Changes Made

Template & Macro Adaptation

Ported all Bootstrap 4 templates and macros to Bootstrap 5 equivalents
Updated CSS classes and component structures to match BS5 specifications
Migrated all macros for Bootstrap 5 compatibility

JavaScript Modernization

Ported form.js to bind "widgets" (right now it's just Select2) to Bootstrap 5 components
- EDIT: Select2 is fully supported and working in modal contexts too
Ported modal.js for modal dialog management
Ported filter.js and details_filter.js for enhanced filtering
Ported action.js for bulk actions and tooltip initialization

UI Component Porting

Adapted list, create, edit, and details views to Bootstrap 5
Ported inline field management components
Migrated row actions and bulk actions interfaces
Updated modal operations (create, edit, details) for BS5

Static Assets

Integrated Bootstrap 5 and Bootswatch theme files
Implemented toast notifications replacing old alert system
Added popover support with proper initialization

Current Status

This is a partial port with the following limitations:

Select2: Basic integration completed
Redis console: Adapted but not fully tested
File admin: Adaptation completed, requires thorough testing
Others third party components are old newer versions should be used in the future

Static File Verification

All new static files (Bootstrap, Bootswatch themes, Select2, etc.) can be verified against official distributions by comparing SHA hashes with CDN and official release versions.

Future Work

This port establishes the foundation for removing jQuery dependency by preparing integration points for modern JavaScript alternatives (i.e. Choices.js) to replace Select2 in future iterations.

Example Application

Includes comprehensive example demonstrating all ported features: modal operations, inline editing, filtering, search, export functionality, and multi-level navigation.

The example is an enhanced port of the original Bootstrap 4 example. Screenshots below showcase the key functionality:

List filtering and bulk actions
This screenshot shows list filtering capabilities and bulk actions applied to selected records (one record selected in this case):

Bootstrap 5 list view with filtering and bulk actions

Inline editing with modal creation
Demonstrates creating a new organization with inline user addition. The trash icon (top right) allows removing the added user for demonstration purposes:

Theme switching and Select2 integration
Shows the United Bootswatch theme and demonstrates Select2 functionality in modal creation:

Modal creation with Select2 using United theme

Link to relevant issues or previous PRs

Other contributors have attempted to achieve this result (#2350 #2163). This PR aims to initiate the definitive introduction of Bootstrap 5 support by providing a comprehensive foundation for the migration.

these are practically unchanged from the Bootstrap 4 templates

Removed custom CSS from admin.css in favor of Bootstrap 5 classes. Updated base.html to use the right static files and included popover and toast message handling.

…ration Migrated macros to BS5 and created form.js to bind widgets to Bootstrap 5 components. Added select2 support (non-functional in modals). Planning to replace select2 with native JS solutions to remove jQuery dependency.

Added action.js to handle bulk actions and initialize tooltips for column descriptions. TODO: review implementation.

… scripts Introduced modal.js for modal management and details_filter.js for details model filtering.

…further testing and fixes)

Example includes modal operations, inline models editing, filtering, search, export, Select2 integration, and multi-level navigation to demonstrate all BS5 components.

ElLorans · 2025-07-25T07:43:24Z

can you run tox --e style?

…renderers in rules.py

…older (e.g., 'bootstrap4', 'bootstrap5'). This function is essential for UI components, like widgets, that need to adapt their rendering based on the configured theme. The implementation is robust and supports multi-admin applications by inspecting the current request's endpoint (`request.endpoint`) and matching it against the endpoints of the views registered within each `Admin` instance. If the helper is called from outside an admin-related view (e.g., a public homepage) or outside a request context, it falls back to using the theme of the first registered `Admin` instance. TODO: - A caching mechanism should be added to avoid re-scanning the admin views on every call, which currently involves a nested loop.

…ed on active theme configuration

improved the development environment setup to support both `pip` and `uv`.

filippolauria · 2025-07-28T15:19:14Z

Continued development on this PR.

I've styled the FileUploadInput and ImageUploadInput widgets to provide responsive, theme-aware defaults for Bootstrap 5, while preserving the ability for users to provide their own custom templates.

Here are some screenshots from the "Forms" example demonstrating the new default look:

FileUploadInput (Bootstrap 5)

ImageUploadInput (Bootstrap 5)

…pdate form.js version to 1.0.2

ElLorans · 2025-07-31T13:26:17Z

Is this PR ready for review or do you plan to keep working on it? A 64k PR is somewhat too complex, I fear

filippolauria · 2025-08-01T08:26:48Z

@ElLorans I may be mistaken because I did this very quickly, but the only files I created/modified are:

template files for Bootstrap 5
a few "core" Python files
a couple of examples
some static JavaScript and CSS files
The rest are the latest versions of third-party components
(you can verify this by comparing the checksums with the official versions).

The following line of code counts roughly how many lines of code were actually affected by this PR (TL;DR <5k)

$ wc -l $(git diff upstream/master --name-only | grep -E 'templates/bootstrap5|examples|\.py|static/admin/.*/bootstrap5')
    40 examples/bootstrap5/README.rst
     0 examples/bootstrap5/__init__.py
   326 examples/bootstrap5/app.py
     2 examples/bootstrap5/requirements.txt
   340 examples/forms-files-images/main.py
    12 examples/forms-files-images/pyproject.toml
   660 flask_admin/form/upload.py
   243 flask_admin/helpers.py
    16 flask_admin/static/admin/css/bootstrap5/admin.css
    57 flask_admin/static/admin/css/bootstrap5/rediscli.css
    19 flask_admin/static/admin/css/bootstrap5/submenu.css
   237 flask_admin/static/admin/js/bootstrap5/actions.js
   116 flask_admin/static/admin/js/bootstrap5/details_filter.js
   317 flask_admin/static/admin/js/bootstrap5/filters.js
   185 flask_admin/static/admin/js/bootstrap5/form.js
    82 flask_admin/static/admin/js/bootstrap5/modal.js
   149 flask_admin/static/admin/js/bootstrap5/rediscli.js
    51 flask_admin/templates/bootstrap5/admin/actions.html
   145 flask_admin/templates/bootstrap5/admin/base.html
    12 flask_admin/templates/bootstrap5/admin/file/form.html
   199 flask_admin/templates/bootstrap5/admin/file/list.html
    20 flask_admin/templates/bootstrap5/admin/file/modals/form.html
     3 flask_admin/templates/bootstrap5/admin/index.html
    79 flask_admin/templates/bootstrap5/admin/layout.html
   414 flask_admin/templates/bootstrap5/admin/lib.html
     1 flask_admin/templates/bootstrap5/admin/master.html
    44 flask_admin/templates/bootstrap5/admin/model/create.html
   100 flask_admin/templates/bootstrap5/admin/model/details.html
    81 flask_admin/templates/bootstrap5/admin/model/edit.html
    17 flask_admin/templates/bootstrap5/admin/model/inline_field_list.html
     4 flask_admin/templates/bootstrap5/admin/model/inline_form.html
    77 flask_admin/templates/bootstrap5/admin/model/inline_list_base.html
   193 flask_admin/templates/bootstrap5/admin/model/layout.html
   268 flask_admin/templates/bootstrap5/admin/model/list.html
    34 flask_admin/templates/bootstrap5/admin/model/modals/create.html
    45 flask_admin/templates/bootstrap5/admin/model/modals/details.html
    33 flask_admin/templates/bootstrap5/admin/model/modals/edit.html
    57 flask_admin/templates/bootstrap5/admin/model/row_actions.html
    28 flask_admin/templates/bootstrap5/admin/rediscli/console.html
    32 flask_admin/templates/bootstrap5/admin/rediscli/response.html
     3 flask_admin/templates/bootstrap5/admin/static.html
    55 flask_admin/theme.py
  4796 total

ElLorans · 2025-08-01T09:20:01Z

Thanks. About my first question, is the PR ready for review or do you need any final tweaks?

filippolauria · 2025-08-01T10:50:36Z

You can review it. Just consider what I wrote above: I only managed to integrate Select2. I didn't integrate x-editable and datepicker. So this PR is somewhat of a starting point on which, hopefully, other contributors will also start contributing.

ElLorans · 2025-08-01T11:48:10Z

Unfortunately and understandibly, everybody prefers his own frontend theme PR. Maybe we can coordinate here #2647

filippolauria added 20 commits July 14, 2025 13:45

started adding bootstrap 5 static css/js files

173e6c2

added bootswatch files

fd7056a

added select2 for bootstrap5 static files

7ac7772

added basic templates

2d1cde0

these are practically unchanged from the Bootstrap 4 templates

Partial implementation of multi-level menus

dc6bc9e

started inline fields migration to Bootstrap 5

2dbdf9c

clean up admin styles and enhance base template

2cddc5d

Removed custom CSS from admin.css in favor of Bootstrap 5 classes. Updated base.html to use the right static files and included popover and toast message handling.

adapted layout macros to bootstrap 5

38abe7b

Adapted row actions to Bootstrap 5

11d7f15

Adapted bulk actions to Bootstrap 5 and implemented action.js

93fed2f

Added action.js to handle bulk actions and initialize tooltips for column descriptions. TODO: review implementation.

Completed inline fields porting to Bootstrap 5

db214bf

Adapted edit and details models to Bootstrap 5 and added modal/filter…

909eb25

… scripts Introduced modal.js for modal management and details_filter.js for details model filtering.

Adapted create model to bs5

3b70451

Adapted create, edit and details modals to bs5

2a38f72

Adapted list model to bs5 and created filter.js for filtering management

7b3d959

Adapted redis console and file admin to bs5 (not fully tested, needs …

847c991

…further testing and fixes)

Updated theme.py to support Bootstrap 5 version

40d1f21

Added Bootstrap 5 example with several features testing

df37ecb

Example includes modal operations, inline models editing, filtering, search, export, Select2 integration, and multi-level navigation to demonstrate all BS5 components.

Merge branch 'master' of https://github.com/filippolauria/flask-admin

bb61101

filippolauria added 2 commits July 25, 2025 11:36

Fixed style test issues

8087511

Made example compatible with both pip and uv

2badb59

ElLorans added the theme label Jul 25, 2025

filippolauria added 6 commits July 25, 2025 16:27

enhanced column sorting and tooltip functionality

d7b9c8b

Added lib imports in create and edit templates to support hard-coded …

8c5dc39

…renderers in rules.py

Refactor file and image upload widgets to support dynamic theming bas…

f4817ca

…ed on active theme configuration

Updated the example app to test the new Bootstrap 5 templates and

965f4b1

improved the development environment setup to support both `pip` and `uv`.

Merge remote-tracking branch 'upstream/master'

b9f9581

fixed style complaints

aa205b4

Enhanced select2 integration to support dropdowns within modals and u…

0468f31

…pdate form.js version to 1.0.2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: Initial Bootstrap 5 theme implementation - foundational UI port #2642

feat: Initial Bootstrap 5 theme implementation - foundational UI port #2642

Uh oh!

filippolauria commented Jul 24, 2025 •

edited

Loading

Uh oh!

ElLorans commented Jul 25, 2025

Uh oh!

filippolauria commented Jul 28, 2025

Uh oh!

ElLorans commented Jul 31, 2025

Uh oh!

filippolauria commented Aug 1, 2025

Uh oh!

ElLorans commented Aug 1, 2025

Uh oh!

filippolauria commented Aug 1, 2025

Uh oh!

ElLorans commented Aug 1, 2025

Uh oh!

Uh oh!

Uh oh!

feat: Initial Bootstrap 5 theme implementation - foundational UI port #2642

Are you sure you want to change the base?

feat: Initial Bootstrap 5 theme implementation - foundational UI port #2642

Uh oh!

Conversation

filippolauria commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes Made

Current Status

Static File Verification

Future Work

Example Application

Link to relevant issues or previous PRs

Uh oh!

ElLorans commented Jul 25, 2025

Uh oh!

filippolauria commented Jul 28, 2025

Uh oh!

ElLorans commented Jul 31, 2025

Uh oh!

filippolauria commented Aug 1, 2025

Uh oh!

ElLorans commented Aug 1, 2025

Uh oh!

filippolauria commented Aug 1, 2025

Uh oh!

ElLorans commented Aug 1, 2025

Uh oh!

Uh oh!

filippolauria commented Jul 24, 2025 •

edited

Loading