Bootstrap v4 Responsive Navbars without jQuery

November 16, 2017 • JavaScript, Bootstrap

I’ve been using Bootstrap v4 in a project I am working on for a friend. He wants to be able to use the application on a mobile phone. Since I used Bootstrap’s navbar, I was going to need Bootstrap’s collapse javascript code. That code depends upon jQuery, and that is an issue for me. So I decided I would write some code that would perform the same basic function as Bootstraps, but not use jQuery at all.

So long as the collapsing is vertical, and you don’t need the events or the programmatic console this should work just fine for you.

Here is a small demo of the code in use.

See the Pen Bootstrap 4 Collapsable Navbar, without jQuery by Jason Butz (@jasonbutz) on CodePen.

And the code in a gist, just because.

Jason Butz's profile picture

Jason Butz is a software engineer and cloud architect with a strong focus on JavaScript, TypeScript, Node, and AWS. Jason has a love for open-soure software and a passion for building scalable, secure, and reliable applications.