bug #1598 [Bootstrap v5] Upgrade the bootstrap javascript files from 4.6.2 to 5.3.7 (rosier)

javiereguiluz · javiereguiluz · commit d36ba89be72a · 2025-09-05T13:02:40.000+02:00
This PR was merged into the main branch. Discussion ---------- [Bootstrap v5] Upgrade the bootstrap javascript files from 4.6.2 to 5.3.7 When the bootstrap sass files were upgraded to v5, the javascript / importmap files were overlooked and are still at v4.6.2 This PR: - Upgraded Bootstrap from 4.6.2 to 5.3.7 - Upgraded from Popper v1.x to Popper v2.x. Also the data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, use data-bs-toggle instead of data-toggle. Commits ------- 97fc3ce Upgrade Bootstrap javascript files from 4.6.2 to 5.3.7
diff --git a/assets/admin.js b/assets/admin.js
@@ -1,4 +1,5 @@
 import './styles/admin.css';
+import * as bootstrap from 'bootstrap';
 import 'typeahead.js';
 import Bloodhound from "bloodhound-js";
 import './js/jquery_global.js';
@@ -44,7 +45,9 @@ $(document).on('submit', 'form[data-confirmation]', function (event) {
                 $confirm.data('result', 'yes');
                 $form.find('input[type="submit"]').attr('disabled', 'disabled');
                 $form.trigger('submit');
-            })
-            .modal('show');
+            });
+
+        const myModal = new bootstrap.Modal($confirm);
+        myModal.show();
     }
 });
diff --git a/assets/app.js b/assets/app.js
@@ -5,12 +5,7 @@ import 'highlight.js/styles/github-dark-dimmed.css';
 import 'lato-font/css/lato-font.css';
 
 // loads the Bootstrap plugins
-import 'bootstrap/js/dist/alert';
-import 'bootstrap/js/dist/collapse';
-import 'bootstrap/js/dist/dropdown';
-import 'bootstrap/js/dist/tab';
-import 'bootstrap/js/dist/modal';
-import 'jquery'
+import 'bootstrap';
 
 // loads the code syntax highlighting library
 import './js/highlight.js';
diff --git a/assets/styles/app.scss b/assets/styles/app.scss
@@ -161,10 +161,6 @@ header nav.navbar .nav-item {
   border-bottom: 0;
   color: var(--white);
 }
-#locale-selector-modal .modal-header .close {
-  color: var(--white);
-  opacity: 1;
-}
 #locale-selector-modal .modal-body {
   background: var(--text-color);
 }
diff --git a/importmap.php b/importmap.php
@@ -23,12 +23,11 @@
     '@hotwired/stimulus' => [
         'version' => '3.2.2',
     ],
-    'bootstrap/js/dist/alert' => [
-        'version' => '4.6.2',
+    '@popperjs/core' => [
+        'version' => '2.11.8',
     ],
-    'bootstrap/dist/css/bootstrap.min.css' => [
-        'version' => '4.6.2',
-        'type' => 'css',
+    'bootstrap' => [
+        'version' => '5.3.7',
     ],
     'jquery' => [
         'version' => '3.7.1',
@@ -55,18 +54,6 @@
         'version' => '4.6.13',
         'type' => 'css',
     ],
-    'bootstrap/js/dist/collapse' => [
-        'version' => '4.6.2',
-    ],
-    'bootstrap/js/dist/dropdown' => [
-        'version' => '4.6.2',
-    ],
-    'bootstrap/js/dist/tab' => [
-        'version' => '4.6.2',
-    ],
-    'bootstrap/js/dist/modal' => [
-        'version' => '4.6.2',
-    ],
     'highlight.js/styles/github-dark-dimmed.css' => [
         'version' => '11.9.0',
         'type' => 'css',
@@ -75,9 +62,6 @@
         'version' => '3.0.0',
         'type' => 'css',
     ],
-    'popper.js' => [
-        'version' => '1.16.1',
-    ],
     'typeahead.js' => [
         'version' => '0.11.1',
     ],
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -6,11 +6,12 @@
 <!DOCTYPE html>
 <html lang="{{ app.locale }}" dir="{{ is_rtl() ? 'rtl' : 'ltr' }}">
     <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1"/>
-        <meta name="view-transition" content="same-origin" />
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="view-transition" content="same-origin">
         <title>{% block title %}Symfony Demo application{% endblock %}</title>
         <link rel="alternate" type="application/rss+xml" title="{{ 'rss.title'|trans }}" href="{{ path('blog_rss') }}">
+        <link rel="shortcut icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
 
         {#
             Those two blocks defines frontend entrypoint for CSS and JavaScript assets
@@ -20,7 +21,6 @@
         {% block javascripts %}
             {% block importmap %}{{ importmap('app') }}{% endblock %}
         {% endblock %}
-        <link rel="shortcut icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
     </head>
 
     <body id="{% block body_id %}{% endblock %}" class="{{ is_rtl(app.locale) ? 'rtl' }}">
@@ -33,12 +33,11 @@
                         <a class="navbar-brand" href="{{ path('homepage') }}">
                             Symfony Demo
                         </a>
-                        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#appNavbar" aria-controls="appNavbar" aria-expanded="false" aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
+                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#appNavbar" aria-controls="appNavbar" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
                         </button>
-
-                        <div class="navbar-collapse collapse" id="appNavbar">
-                            <ul class="navbar-nav ml-auto">
+                        <div class="collapse navbar-collapse" id="appNavbar">
+                            <ul class="navbar-nav">
                                 {% block header_navigation_links %}
                                     <li class="nav-item{{ _route == 'blog_index' ? ' active' : '' }}">
                                         <a class="nav-link" href="{{ path('blog_index') }}">
@@ -60,24 +59,22 @@
 
                                 {% if app.user %}
                                     <li class="nav-item dropdown">
-                                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="user">
-                                            <twig:ux:icon name="tabler:user"/>
-                                            <span class="caret"></span>
-                                            <span class="sr-only">{{ app.user.fullname }}</span>
+                                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                            <twig:ux:icon name="tabler:user"/> {{ app.user.fullname }}
                                         </a>
-                                        <div class="dropdown-menu user" role="menu" aria-labelledby="user">
-                                            <a class="dropdown-item" href="{{ path('user_edit') }}">
+                                        <ul class="dropdown-menu">
+                                            <li><a class="dropdown-item" href="{{ path('user_edit') }}">
                                                 <twig:ux:icon name="tabler:id-badge-2"/> {{ 'menu.user'|trans }}
-                                            </a>
-                                            <div class="dropdown-divider"></div>
-                                            <a class="dropdown-item" href="{{ logout_path() }}">
+                                            </a></li>
+                                            <li><hr class="dropdown-divider"></li>
+                                            <li><a class="dropdown-item" href="{{ logout_path() }}">
                                                 <twig:ux:icon name="tabler:logout"/> {{ 'menu.logout'|trans }}
-                                            </a>
-                                        </div>
+                                            </a></li>
+                                        </ul>
                                     </li>
                                 {% endif %}
 
-                                <li class="nav-item dropdown">
+                                <li class="nav-item">
                                     {% from 'default/_language_selector.html.twig' import render_language_selector %}
                                     {{ render_language_selector() }}
                                 </li>
diff --git a/templates/blog/_delete_post_confirmation.html.twig b/templates/blog/_delete_post_confirmation.html.twig
@@ -1,4 +1,4 @@
-{# Bootstrap modal, see https://getbootstrap.com/docs/3.4/javascript/#modals #}
+{# Bootstrap modal, see https://getbootstrap.com/docs/5.3/components/modal/ #}
 <div class="modal fade" id="confirmationModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content">
@@ -7,10 +7,10 @@
                 <p>{{ 'delete_post_modal.body'|trans }}</p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" id="btnNo" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" id="btnNo" data-bs-dismiss="modal">
                     <twig:ux:icon name="tabler:ban"/> {{ 'label.cancel'|trans }}
                 </button>
-                <button type="button" class="btn btn-danger" id="btnYes" data-dismiss="modal">
+                <button type="button" class="btn btn-danger" id="btnYes" data-bs-dismiss="modal">
                     <twig:ux:icon name="tabler:trash"/> {{ 'label.delete_post'|trans }}
                 </button>
             </div>
diff --git a/templates/debug/source_code.html.twig b/templates/debug/source_code.html.twig
@@ -3,7 +3,7 @@
         {{ 'help.show_code'|trans|raw }}
     </p>
 
-    <button type="button" class="btn btn-secondary py-3 btn-lg btn-block" data-toggle="modal" data-target="#sourceCodeModal">
+    <button type="button" class="btn btn-secondary py-3 btn-lg btn-block" data-bs-toggle="modal" data-bs-target="#sourceCodeModal">
         <twig:ux:icon name="tabler:code"/> {{ 'action.show_code'|trans }}
     </button>
 
@@ -12,23 +12,21 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title"><twig:ux:icon name="tabler:code"/> {{ 'title.source_code'|trans }}</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'action.close'|trans }}">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'action.close'|trans }}"></button>
                 </div>
 
                 <div class="modal-body">
                     <ul class="nav nav-tabs" id="myTab" role="tablist">
-                        <li class="nav-item">
-                            <a class="nav-link active" id="controller-tab" data-toggle="tab" href="#controller-code" role="tab" aria-controls="home" aria-selected="true" target="_blank">{{ 'title.controller_code'|trans }}</a>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link active" id="controller-tab" data-bs-toggle="tab" data-bs-target="#controller-code" type="button" role="tab" aria-controls="controller-code" aria-selected="true">{{ 'title.controller_code'|trans }}</button>
                         </li>
-                        <li class="nav-item">
-                            <a class="nav-link" id="template-tab" data-toggle="tab" href="#template-code" role="tab" aria-controls="profile" aria-selected="false" target="_blank">{{ 'title.twig_template_code'|trans }}</a>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link" id="template-tab" data-bs-toggle="tab" data-bs-target="#template-code" type="button" role="tab" aria-controls="template-code" aria-selected="false">{{ 'title.twig_template_code'|trans }}</button>
                         </li>
                     </ul>
 
                     <div class="tab-content" id="myTabContent">
-                        <div class="tab-pane show active" id="controller-code" role="tabpanel" aria-labelledby="controller-tab">
+                        <div class="tab-pane show active" id="controller-code" role="tabpanel" aria-labelledby="controller-tab" tabindex="0">
                             {% if controller %}
                                 <p class="file-link">{{ link_source_file(controller.file_path, controller.starting_line) }}</p>
                                 <pre><code class="php">{{ controller.source_code }}</code></pre>
@@ -37,7 +35,7 @@
                             {% endif %}
                         </div>
 
-                        <div class="tab-pane" id="template-code" role="tabpanel" aria-labelledby="template-tab">
+                        <div class="tab-pane" id="template-code" role="tabpanel" aria-labelledby="template-tab" tabindex="0">
                             <p class="file-link">{{ link_source_file(template.file_path, template.starting_line) }}</p>
                             <pre><code class="twig">{{ template.source_code }}</code></pre>
                         </div>
diff --git a/templates/default/_flash_messages.html.twig b/templates/default/_flash_messages.html.twig
@@ -18,13 +18,10 @@
     <div class="messages">
         {% for type, messages in app.flashes %}
             {% for message in messages %}
-                {# Bootstrap alert, see https://getbootstrap.com/docs/3.4/components/#alerts #}
+                {# Bootstrap alerts, see https://getbootstrap.com/docs/5.3/components/alerts/#dismissing #}
                 <div class="alert alert-dismissible alert-{{ type }} fade show" role="alert">
-                    <button type="button" class="close" data-dismiss="alert" aria-label="{{ 'action.close'|trans }}">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-
                     {{ message|trans }}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ 'action.close'|trans }}"></button>
                 </div>
             {% endfor %}
         {% endfor %}
diff --git a/templates/default/_language_selector.html.twig b/templates/default/_language_selector.html.twig
@@ -1,34 +1,28 @@
 {% macro render_language_selector(display_current_language = false) %}
-    <a href="#" class="nav-link dropdown-toggle language-selector-dropdown-button" data-toggle="modal" data-target="#locale-selector-modal" role="button" id="locales">
+    <a class="nav-link language-selector-dropdown-button" href="#" role="button" data-bs-toggle="modal" data-bs-target="#locale-selector-modal">
         <twig:ux:icon name="tabler:world"/>
         {% if display_current_language %}
             <span class="current-language">{{ app.locale|locale_name }}</span>
         {% endif %}
-        <span class="caret"></span>
         <span class="sr-only">{{ 'menu.choose_language'|trans }}</span>
     </a>
 
     <div id="locale-selector-modal" class="modal" tabindex="-1" aria-hidden="true">
         <div class="modal-lg modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
-                    <p class="modal-title" lang="en">
-                        {# display this title always in English to make the language selector easier to use #}
-                        Choose your language
-                    </p>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+                    {# Display this title always in English to make the language selector easier to use #}
+                    <h1 class="modal-title" lang="en">Choose your language</h1>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{{ 'action.close'|trans }}"></button>
                 </div>
 
                 <div class="modal-body">
                     <ul class="locales">
                         {% for locale in locales() %}
-                            {% set is_active = app.locale == locale.code %}
-                            <li class="{{ is_active ? 'active' }} {{ is_rtl(locale.code) ? 'rtl' }}" translate="no">
+                            {%- set is_active = app.locale == locale.code -%}
+                            <li class="{{ is_active ? 'active' }}{{ is_rtl(locale.code) ? ' rtl' }}" translate="no">
                                 <a class="stretched-link" lang="{{ locale.code }}" hreflang="{{ locale.code }}" href="{{ path(app.current_route ?? 'blog_index', app.current_route_parameters|merge({_locale: locale.code})) }}">
-                                    {{ locale.name|capitalize }}
-                                    <small>{{ locale.code }}</small>
+                                    {{ locale.name|capitalize }} <small>{{ locale.code }}</small>
                                 </a>
                             </li>
                         {% endfor %}

Original file line number	Diff line number	Diff line change
`@@ -161,10 +161,6 @@ header nav.navbar .nav-item {`
`161`	`161`	`border-bottom: 0;`
`162`	`162`	`color: var(--white);`
`163`	`163`	`}`
`164`		`-#locale-selector-modal .modal-header .close {`
`165`		`- color: var(--white);`
`166`		`- opacity: 1;`
`167`		`-}`
`168`	`164`	`#locale-selector-modal .modal-body {`
`169`	`165`	`background: var(--text-color);`
`170`	`166`	`}`