Skip to content
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.

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

Plan to upgrade bootstrap? #401

Closed
whatacold opened this issue Jul 14, 2021 · 4 comments · Fixed by #466
Closed

Plan to upgrade bootstrap? #401

whatacold opened this issue Jul 14, 2021 · 4 comments · Fixed by #466

Comments

@whatacold
Copy link
Contributor

The bootstrap used is v3.3, which is quite old, and it will be deprecated some time in the future, so any plan?

@rterakedis
Copy link
Contributor

@whatacold - I've started digging into this but switching from the 3.3 to either 4.6 or 5.0.2 completely destroys the navbar. If you want to try testing as I did, here's how I've set things up:

  1. I downloaded the 2 versions of bootstrap. In each version, i renamed bootstrap.min.js and bootstrap.min.css to 4.6.0.bootstrap.min.js and 4.6.0.bootstrap.min.css (and similar for 5.0.2). Copied these files to themes/beautifulhugo/static/js and themes/beautifulhugo/static/css respectively.

  2. In config.toml added two new keys to the [Params] section and also set selfHosted = true:

  selfHosted = true
  enableNewBootstrap = false #Use the latest version of Bootstrap.min/js
  enableBootstrapv4 = false #Use the Bootstrap 4 version
  1. modified themes/beautifulhugo/layouts/partials/head.html where it calls bootstrap.min.css under selfHosted to the following:
   {{ if .Site.Params.enableNewBootstrap }}
    <link rel="stylesheet" href="{{ "css/5.0.2.bootstrap.min.css" | absURL }}" />
   {{ else if .Site.Params.enableBootstrapv4 }}
    <link rel="stylesheet" href="{{ "css/4.6.0.bootstrap.min.css" | absURL }}" />
   {{ else }}
    <link rel="stylesheet" href="{{ "css/bootstrap.min.css" | absURL }}" />
   {{ end }}
  1. modified themes/beautifulhugo/layouts/partials/footer.html where it calls bootstrap.min.js under selfHosted to the following:
  {{ if .Site.Params.enableNewBootstrap }}
    <script src="{{ "js/5.0.2.bootstrap.min.js" | absURL }}"></script>
  {{ else if .Site.Params.enableBootstrapv4 }}
    <link rel="stylesheet" href="{{ "js/4.6.0.bootstrap.min.js" | absURL }}" />
  {{ else }}
    <script src="{{ "js/bootstrap.min.js" | absURL }}"></script>
  {{ end }}

Now I can test by changing the enableNewBootstrap (version 5), or enableBootstrapv4 to true. I haven't figured out if it's going to be easier to migrate from 3-->4-->5 or just go 3-->5.

Hopefully your testing goes better than mine so far....

@whatacold
Copy link
Contributor Author

@rterakedis Thanks for you hark work!

Do you have a branch already, so that people wanting to test will set it up quickly?

@danielwagn3r
Copy link

Latest Bootstrap v3 release (https://github.com/twbs/bootstrap/releases/tag/v3.4.0) is dated 2018. I'm not an expert in frontend development, therefore I use a theme, but I have a feeling this component should be updated to a maintained release.

@davidmn
Copy link
Contributor

davidmn commented Jun 15, 2023

I've been having a play around with 5.3 and it doesn't seem to destroy the navbar when I'm running it. I've made a #466. Feel free to shoot it down as I've probably missed some obvious use cases that my testing has missed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants