I am relatively new to creating webpages and have recently started working on one using Bootstrap 5. I am looking to dynamically add or remove the "bg-opacity" Bootstrap class from my navbar based on the viewport width. I initially attempted to achieve this using JS, but realized that Bootstrap 5 no longer utilizes jQuery. Is there a simple way to toggle classes in Bootstrap 5?
Your help would be greatly appreciated.
Thank you in advance :)
I attempted to implement the following function
jQuery(document).ready(function($) {
var alterClass = function() {
var ww = document.body.clientWidth;
if (ww < 767) {
$('.navbar').addClass('bg-opacity-75');
} else if (ww >= 768) {
$('.navbar').removeClass('bg-opacity-75');
};
};
$(window).resize(function(){
alterClass();
});
//Fire it when the page first loads:
alterClass();
});