Skip to content
loading...

Scrollable tabs with Bootstrap 4

miteshkamat27 profile image Mitesh Kamat github logo ・1 min read  

Introduction

This post is about creating scrollable tabs using bootstrap.

Whenever a requirement of creating a tab bar comes up, we tend to think of how this would look in mobile view. If we are short of time, we look for options like plugins or does bootstrap has what I need which I can leverage and customize later on.

Same happened with me and I found out Bootstrap 4 doesnot give me such a component.

Then, I used the existing bootstrap 4 markup for tabs customised it to my needs and made it scrollable.

what I used?

Bootstrap 4.4.1
Small JavaScript code (3 liner)
Default template for tabs from bootstrap

And this is how it looks like https://codepen.io/miteshkamat27/pen/QWbYPPW

I hope it reduces your pain in search of a scrollable tab bar.

Cheers !!!

twitter logo DISCUSS
Discussion
markdown guide
Classic DEV Post from Jul 26 '19

🎩 JavaScript Enhanced Scss mixins! 🎩 concepts explained

In the next post we are going to explore CSS @apply to supercharge what we talk about here....

Mitesh Kamat profile image
Front End Engineer | Big fan of JavaScript