Should I go for Bootstrap 5 when designing a site from scratch (probably using a template as a starting point), or would Bootstrap 4 or even 3 be OK as well?
The reason for asking is that I noticed that when testing one of the templates I’m considering for starting (Startbootstrap.com scrolling nav) I noticed that the smooth scrolling works fine in Firefox (latest version) but is completely gone in Safari (version 13).
Bootstrap 3 and 4 versions of the same template however work just fine in both browsers.
I have looked into the issue and believe there are some workarounds (haven’t tried them out myself yet though), but wonder if using say Bootstrap 4 would allow for users of older browsers to visit my site without issues, or if there are good reasons to avoid it and rather spend time finding workarounds to the code.
This is a recently updated article that should give you an idea of the trade-offs between the two versions. I’ve not given v5 a go yet; v4 has always given me what I need, though I’ve not used it in a production setting.
The smooth scrolling in latest version of bootstrap is handled by the css property scroll-behaviour:smooth.
:root {
scroll-behavior: smooth;
}
Safari doesn’t support this property yet (its still under an experimental flag I believe). I’m sure it will get implemented eventually. The rest of the page should work ok though and the js scrollspy nav highlight is working as is the rest of the page as far as I can see.
It’s such a simple page though that it hardly seems worth the overhead of bootstrap although bootstrap 5 is better than previous incarnations in this respect.
Ah! I found for this problem here (scroll down to “cross-browser solution”) with a script to be inserted into the HTML document:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
I tested the page in both browsers both with the above code present and removed. Either way it worked in both browsers.
So I’m wondering if the correct thing is to remove it, or if it’s used by Firefox and other supported browsers for an improved Bootstrap 5 type scroll while for non-supported browsers (i.e. Safari) the new script kicks in because “scroll-behavior: smooth” isn’t recognized?
Yes, I chose a simple template to get started (to make things simpler for a novice like myself).
I’ll be adding sidebar navigation on the left side like this one on Bootstraptheme.com or better yet (because it has smooth-scrolling), this one on StartBoostrap.com.
However, within Safari the last one doesn’t stay in place when scrolling the page nor have smooth scrolling. Perhaps both problems are likely due to the same “scroll-behavior: smooth” problem?
Yes but you just added back in jquery which was one of the main purposes of bootstrap5 to remove the dependency of jquery. You effectively took one step forward and then two steps back
The tiny polyfill you mentioned works fine in Safari and I would suggest you retry rather than adding back in jquery. If you are adding back in jquery then you may be better off going back down to bootstrap4 otherwise you have the vaniila js in bootstrap5 plus jquery as well fighting over each other.
Yes I showed just the pertinent code and that is the full rule. The reduced motion media query is for accessibility and doesn’t give scrolling to users who have chosen reduced motion in their browser settings.
That template does smooth scroll in Safari but they have messed up the css position:sticky on the sidenav which will work in Safari if implemented properly. I guess you’d have to test in the actual template rather than that demo page which seems to have a lot of unnecessary code in place.
Remember though that bootstrap isn’t specifically an easy entry system and indeed you have to learn more css if you want to implement it properly. I’ll stand by my comments above and say that for simple pages it may make life more difficult unless you use templates out of the box without adjustment. Adjusting templates and adjusting bootstrap is quite an involved process that requires a good understanding of CSS and bootstrap.
By all means use it but you must invest the time to learn it properly.
I’ve obviously been dazzled by all the new features in version 5
Yes, I see what you mean about taking one step forward and two steps back.
I never got the polyfill code to work, but maybe I misunderstood how to implement it. What I did was download the JS from here (scroll down to “Installation and use”), put it in my Javascript folder and insert a reference to it in the HTML document, just between </head> and <body> tags:
My understanding is that it should then be ready and be used whenever necessary.
If the setup is correct I think I’ll just go back to BS4 as you suggested. After all the smooth scrolling worked fine out of the box with that template (a BS4-based version which I also downloaded) running in Safari, and since I’m not aiming for a very complex website it might not make much difference if I don’t run the latest version (BS5).
I see what you mean about adjusting templates being an involved process, but I’m willing to give it a go. As long as I have a starting point (which I now have with that template) I basically see it as setting up the grid correctly (top-nav, content, static sidebar-nav, and a footer), editing/fine tuning the individual components (sidebar nav etc.), then placing those components into the final HTML document as well as styling the CSS for everything of course.
The good thing about mistakes is that I learn new stuff from it
PS: Thanks for the suggestion on how to fix the StartBootstrap left-sidebar nav position. I’ll look into the code surrounding position:sticky.
Yes it looks a little complex and there are no clear instructions but the demo page works in Safari so it should work if implemented correctly. It looks like you have to kickstart it once in place but it’s probably a question for the JS forum if you want to get it working as JS isn’t my area.
Yes, i learn much more when stuff doesn’t work the first time
Looks like I’ll be learning a whole lot in the near future while trying to figure out things
As I’m one of those “learning by doing” types I’ll look into the source of that working demo page and see if I can figure something out.
Failing that, would it be a great loss to settle on Bootstrap 4 instead of 5 for my website? I mean, I’ve read what’s new with version 5 (thanks for the link earlier in the thread, Chrisofarabia) but I don’t feel qualified to determine if version 4 is just as fine for most websites today?
