Upgrade to bootstrap 5.3.2

[alimohebbi]

Hi Vasilios,

Thank you for creating this valuable repository. I've upgraded it to use Bootstrap 5.3.2 while maintaining the original style. The changes include:

• Updated navbar class
• Updated image class
• Added classes to links
• Merged parent elements of the sidebars

I believe this update will benefit more researchers looking to use this template with the latest Bootstrap features. Please consider accepting this pull request.

Best regards,
Ali

[mavroudisv]

Thank you very much Ali! I will review the pull request soon :)

[mavroudisv]

Hi Ali and thanks for the pull request once again!

Moving to more recent versions of bootstrap and potentially JQuery is needed. I understand that you probably had to do quite a lot of porting as things might have changed overtime. I did try the proposed changes and I noticed some changes that I would like to understand better:

• The fonts seem different in the PR version (?)
• My browser can't load Popper from the CDN listed.
• The top menu is ragged all the way to the left but doesn't align with the content below as does the current version.
• I also wonder about moving from JQuery to Popper (?)

Thanks! :)
Vas

[alimohebbi]

Hi Vasilios,

Thank you so much for the feedback. I will check them and get back to you :)

Regards
Ali.

[alimohebbi]

Hi Vas,

I've made some updates to the pull request, and I'd like to address your comments as follows:

1. Fonts: It appears that the font size has changed in the PR version, which is due to the upgrade to Bootstrap 5. To maintain consistency with the previous version, I've added a small CSS code to ensure the font size matches.

2. Popper CDN: I apologize for the misunderstanding. I mistakenly thought that Popper needed to be included, but it should only be included explicitly in specific cases. I've removed the line for including Popper from the CDN.

3. Top Menu Alignment: I couldn't identify any issues with the top menu alignment. To help me investigate further, could you please provide a screenshot of the problem and also try testing it on another browser?

4. JQuery to Popper Transition: According to the official website, jQuery is no longer required for certain functionalities. Bootstrap 5 now allows you to add toggleable hidden elements, modals, off-canvas menus, popovers, tooltips, and more without relying on jQuery.

If you have any more questions or concerns, please feel free to ask. Your feedback is highly appreciated.

Regards
Ali

[alimohebbi]

@mavroudisv have you given up on this project?

[mavroudisv]

I'll get back to you asap :)

[mavroudisv]

Hi Ali,

Apologies for the delay. It looks good overall. The only thing I haven't managed to figure out is the alignment between the menu and the 900x300 figure.

Another thing that is easy to fix is the color of the body font (used to be #333) and it seems the font itself. We can use your inline css to force though.

[alimohebbi]

Hi @mavroudisv

Thanks for the reply. No problem.

• Alignment between the menu and the 900x300 figure: I assume you mean the alignment between the navbar and the figure. If so, I had a different view of the page in which they were aligned well. I changed style of navbar from "style="margin-left: 8%" to using "ms-5 ps-5" classes. That should make the preview more robust in different machines.
• font family and color: I set the color of the body to be #333 and the font-family to "Helvetica Neue, Helvetica,Arial,sans-serif"

Regards,
Ali

[maitra]

Is this upgrade going to be merged with the main branch, or is that no longer needed?

[mavroudisv]

@alimohebbi thanks for the edits and apologies for the delay. I'm keen to merge your PR. I'm still facing issues with alignment though. This happens if I resize the page (in width).

The current version is robust to this, so there must be a way.

@maitra yes, we are ironing out some details and hope to merge soon.