Skip to content

[Bootstrap v5] Upgrade the bootstrap javascript files from 4.6.2 to 5.3.7 #1598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 5, 2025
Merged

[Bootstrap v5] Upgrade the bootstrap javascript files from 4.6.2 to 5.3.7 #1598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions assets/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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();
}
});
7 changes: 1 addition & 6 deletions assets/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
4 changes: 0 additions & 4 deletions assets/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
24 changes: 4 additions & 20 deletions importmap.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -75,9 +62,6 @@
'version' => '3.0.0',
'type' => 'css',
],
'popper.js' => [
'version' => '1.16.1',
],
'typeahead.js' => [
'version' => '0.11.1',
],
Expand Down
39 changes: 18 additions & 21 deletions templates/base.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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' }}">
Expand All @@ -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') }}">
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions templates/blog/_delete_post_confirmation.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
Expand Down
18 changes: 8 additions & 10 deletions templates/debug/source_code.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand All @@ -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>
Expand Down
7 changes: 2 additions & 5 deletions templates/default/_flash_messages.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
20 changes: 7 additions & 13 deletions templates/default/_language_selector.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
Expand Down
Loading