Migrate from Bootstrap 3.3.7 to Bootstrap 5.3.8 by MuhammadAashirAslam · Pull Request #922 · precice/precice.github.io

MuhammadAashirAslam · 2026-06-01T13:43:32Z

Upgraded Bootstrap from 3.3.7 to 5.3.8 CDN bundle (CSS & JS) in head layouts and removed obsolete IE8/9 compatibility layers.
Simplified HTML layouts by deleting nested row/column wrappers ("div-soup") around section headers, paragraph tags, and obsolete caret helper elements.
Replaced custom CSS classes with modern native Bootstrap 5 grid, flexbox, and alignment utilities (e.g., col-flex -> d-flex flex-column, vertical-align -> d-flex align-items-center, no-margin -> m-0).
Consolidated main styles by deleting modern-business.css and merging rules into customstyles.css.
Purged duplicate CSS rules, legacy browser vendor prefixes, and obsolete panel/card dual-class selectors from stylesheets.
Compensated for spacing changes by shifting the 20px bottom-margin from the removed headers globally to the .section-header class.
Realigned page footer components, custom workshops, and team grids using standard Bootstrap 5 container, rounding, and spacing parameters.
Removed jquery.min.js and jqueryui.min.js and rewrote all jQuery-dependent JS to vanilla DOMContentLoaded APIs.
Replaced the navgoco jQuery sidebar plugin with Bootstrap 5 native collapse component using data-bs-toggle attributes.
Removed unused theme-blue.css and theme-green.css.

Documentation:

BS5 Migration: https://getbootstrap.com/docs/5.3/migration/
Grid System: https://getbootstrap.com/docs/5.3/layout/grid/
Cards (replacing Panels): https://getbootstrap.com/docs/5.3/components/card/
Spacing: https://getbootstrap.com/docs/5.3/utilities/spacing/
Flexbox: https://getbootstrap.com/docs/5.3/utilities/flex/
Dropdowns: https://getbootstrap.com/docs/5.3/components/dropdowns/
Collapse: https://getbootstrap.com/docs/5.3/components/collapse/
Navbar: https://getbootstrap.com/docs/5.3/components/navbar/

MakisH

I have gone through most of the changes and I have looked through all of the pages in "desktop view" and several pages in "mobile view". Here are some first comments (all the ones from #921 seem to have been resolved).

MakisH · 2026-06-05T13:22:20Z

That's a nice and long-overdue addition, thanks!

I wonder if we should use something more unique than the title (e.g., the filename where the data is drawn from), as the title could be duplicated (e.g., the slides and the post-proceedings paper of a conference). But that's not currently an issue.

MakisH · 2026-06-05T14:07:08Z

+{% comment %}
+  Recursive sidebar: renders nested doc nav from _data/sidebars via folder.folderitems.
+  Parameters: item (folder node), level (1–4), parent_id (element id for data-bs-parent accordion group).
+  Branch rows use BS5 Collapse (data-bs-toggle, .collapse.show); leaves are plain nav-links.
+  Active state compares page.url (no leading slash) to each item url.
+{% endcomment %}


Why is this needed, and how does it relate to sidebar.html?

Is this something standard, or something you implemented on top?

Sorry for the late reply, I missed this.

sidebar.html is the shell (title + top-level loop). sidebar_recursive.html does the nested part. It replaces navgoco after we dropped jQuery for BS5, walks _data/sidebars by calling itself, and sets active/expanded state in Liquid instead of client-side JS.

Same idea as Hugo's menu templates docs (recursive partial + active detection). We can then port it directly in the Hugo migration.

MakisH · 2026-06-06T07:59:13Z

 }

+/* Match the fixed collapsed navbar height on narrow screens. */
+@media (max-width: 1199.98px) {


Probably for a next PR: these hard-coded widths in media queries look a bit hacky. We should add some CSS preprocessor, or in some other way make these centrally configurable.

Thanks! i will look in to this

MakisH

Some more comments. I have now looked through the whole code, even though I only skimmed through some longer CSS additions, which I think need to be simplified.

MakisH · 2026-06-06T08:22:32Z

+
+.btn {
+  font-size: 14px;
+  line-height: 1.42857143;


Why this overly-specific number?

This comes from Bootstrap 3’s default line height: 20px / 14px = 1.42857143. The whole .btn block copies the old Bootstrap 3 button metrics (font-size: 14px, line-height: 1.42857143, padding: 6px 12px, border-radius: 4px) so the we keep the previous button height and spacing.

In case of doubt: Fine to have this PR make things look reasonably similar and have a follow-up PR simplifying/cleaning up.

MuhammadAashirAslam · 2026-06-09T16:46:19Z

I found a few remaining Bootstrap 3-era assets, docs, and helper-class references. Tried my best to remove all of the Bootstrap 3 references

440bf9e removes the old Glyphicons font files, since Bootstrap 5 no longer ships or uses them.
904ad64 updates the local Bootstrap assets to 5.3.8 and makes the PDF build use the local stylesheet.
9bc8e05 widens the PDF print layout so generated pages use more of the available page width.
69b459b updates stale documentation that still described the site as using Bootstrap 3.x.
ad133b8 removes remaining old Bootstrap references and migrates legacy image helper classes to Bootstrap 5 equivalents.

MakisH

Thanks for the overview of updates and the clean history, this really helps!

Some comments on the latest changes.

MakisH

Thanks again for resolving all details. The unresolved conversations can be handled in follow-up contributions.

Btw, also closes #867 (nice!)

I think this is already good enough to merge. @fsimonis do you see anything critical?

- Upgraded Bootstrap from 3.3.7 to 5.3.8 CDN bundle (CSS & JS) in head layouts and removed obsolete IE8/9 compatibility layers. - Simplified HTML layouts by deleting nested row/column wrappers ("div-soup") around section headers, paragraph tags, and obsolete caret helper elements. - Replaced custom CSS classes with modern native Bootstrap 5 grid, flexbox, and alignment utilities (e.g., col-flex -> d-flex flex-column, vertical-align -> d-flex align-items-center, no-margin -> m-0). - Consolidated main styles by deleting modern-business.css and merging rules into customstyles.css. - Purged duplicate CSS rules, legacy browser vendor prefixes, and obsolete panel/card dual-class selectors from stylesheets. - Compensated for spacing changes by shifting the 20px bottom-margin from the removed headers globally to the .section-header class. - Realigned page footer components, custom workshops, and team grids using standard Bootstrap 5 container, rounding, and spacing parameters. Documentation: - BS5 Migration: https://getbootstrap.com/docs/5.3/migration/ - Grid System: https://getbootstrap.com/docs/5.3/layout/grid/ - Cards (replacing Panels): https://getbootstrap.com/docs/5.3/components/card/ - Spacing: https://getbootstrap.com/docs/5.3/utilities/spacing/ - Flexbox: https://getbootstrap.com/docs/5.3/utilities/flex/ - Dropdowns: https://getbootstrap.com/docs/5.3/components/dropdowns/

…image

…ustomstyles-precice.css

…ide buttons vertically

MuhammadAashirAslam · 2026-06-13T11:19:53Z

I rebased bootstrap5-migration onto the latest upstream master to keep the branch current and avoid merge conflicts ( turns out this was not needed 😅 )

MuhammadAashirAslam · 2026-06-15T07:02:41Z

4288212 Just a small tweak: the code_aster overview was rendered twice because the same URL was declared both on the code_aster parent and its Overview child.

fsimonis · 2026-06-15T07:45:08Z

I'll take a look at this now.

MakisH · 2026-06-15T08:29:13Z

When updating the branch, the trivial change from #931 will need to be ported.

fsimonis

Reviewing this PR really makes you realize how slow and buggy the GitHub interface has become.

I opened an issue to cleanup these random snippets of JS that are lying around. #932

There is still a lot of CSS in the repo, but hopefully this will shrink when moving to the SASS version of the Hugo site.

I tested it locally and walked through the site with the old and the new side by side using the iPhone 17 preset.
The new theme is slightly more spacious, which is not a bad thing.
The only functional difference I noticed is that the sidebar of the new version is way snappier. Not sure why.

Anyway. Looks good and ready to go.

MakisH · 2026-06-15T11:25:09Z

Just in case this is needed in the future: b25d6e1 is the last commit with Bootstrap 3.

This was referenced Jun 1, 2026

Migration from Bootstrap3.3.7 to Bootstrap 5.3.8 #921

Closed

Upgrade front-end framework #691

Closed

MakisH self-requested a review June 5, 2026 13:32

MakisH reviewed Jun 5, 2026

View reviewed changes

MakisH reviewed Jun 6, 2026

View reviewed changes

MuhammadAashirAslam force-pushed the bootstrap5-migration branch from ad133b8 to 1d7306c Compare June 10, 2026 05:14

MakisH reviewed Jun 10, 2026

View reviewed changes

Comment thread content/community/contribute/community-contribute-open-projects.md

Comment thread _layouts/default_print.html

MakisH added the technical Technical issues on the website label Jun 10, 2026

MakisH added this to GSoC 2026: Website modernization Jun 10, 2026

github-project-automation Bot moved this to Todo in GSoC 2026: Website modernization Jun 10, 2026

MakisH approved these changes Jun 12, 2026

View reviewed changes

MakisH self-assigned this Jun 12, 2026

MuhammadAashirAslam added 16 commits June 13, 2026 15:33

style: address PR review feedback on CSS files and center about page …

ad59cb6

…image

style: refactor remaining navigation selectors with modern :is() in c…

5b709ef

…ustomstyles-precice.css

update secondary button border color to black and align literature gu…

c414060

…ide buttons vertically

Polish Bootstrap 5 migration follow-ups

eabeba1

Fix landing page review follow-ups

3c8699b

Use clearer sidebar item variable

0356d97

Fix navbar logo home link

04239cb

Use root URL for navbar logo link

ab5b9ec

Remove Glyphicons font files

ec6576e

Use Bootstrap 5.3.8 local assets for PDF builds

d791976

Widen PDF print layout

b3d01bb

Update Bootstrap version documentation

843d255

Remove old Bootstrap references

a59a290

Restore open projects page wording

0c7b8eb

Fix browser print layout

2a75240

MuhammadAashirAslam added 3 commits June 13, 2026 15:33

Use Bootstrap table styling and trim custom CSS

f689f51

Restore table header colors

2969261

Show print QR code only once

5ad7bbf

MuhammadAashirAslam force-pushed the bootstrap5-migration branch from 1a69211 to 5ad7bbf Compare June 13, 2026 10:34

Avoid duplicate code_aster overview link

4288212

MakisH moved this from Todo to Needs review in GSoC 2026: Website modernization Jun 15, 2026

fsimonis self-requested a review June 15, 2026 08:52

fsimonis approved these changes Jun 15, 2026

View reviewed changes

MakisH added 2 commits June 15, 2026 13:17

Merge branch 'master' into bootstrap5-migration

48697e6

Adjust div classes in precice-workshop-2027.md

d3bbccc

MakisH changed the title ~~Migration from Bootstrap 3.3.7 to Bootstrap 5.3.8~~ Migrate from Bootstrap 3.3.7 to Bootstrap 5.3.8 Jun 15, 2026

MakisH merged commit c8ef3c5 into precice:master Jun 15, 2026
2 checks passed

github-project-automation Bot moved this from Needs review to Done in GSoC 2026: Website modernization Jun 15, 2026

Uh oh!

Uh oh!

Conversation

MuhammadAashirAslam commented Jun 1, 2026

Uh oh!

MakisH left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MakisH Jun 5, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MakisH Jun 5, 2026

Choose a reason for hiding this comment

Uh oh!

MuhammadAashirAslam Jun 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

MakisH Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

MuhammadAashirAslam Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MakisH left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

MakisH Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

MuhammadAashirAslam Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

MakisH Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MuhammadAashirAslam commented Jun 9, 2026

Uh oh!

MakisH left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

MakisH left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MuhammadAashirAslam commented Jun 13, 2026

Uh oh!

MuhammadAashirAslam commented Jun 15, 2026

Uh oh!

fsimonis commented Jun 15, 2026

Uh oh!

MakisH commented Jun 15, 2026

Uh oh!

fsimonis left a comment

Choose a reason for hiding this comment

Uh oh!

MakisH commented Jun 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MuhammadAashirAslam Jun 6, 2026 •

edited

Loading

MakisH left a comment •

edited

Loading