How to allow horizontal scrolling and prevent vertical scrolling in Bootstrap’s nav tab

Here is how to set up the nav tab in Bootstrap so that the tab is scrollable horizontally and how to adjust the style to prevent vertical scrolling.

First, apply the following styles to make the tabs horizontally scrollable

overflow-x: auto; 
-webkit-overflow-scrolling: touch; 
flex-wrap: nowrap;

However, applying this style would also cause vertical scrolling. Therefore, we adjust the Bootstrap style as follows.

First, the existing style is as follows

.nav-tabs .nav-item { 
 margin-bottom: -1px; 
}

Change this to the following

.nav-tabs .nav-item { 
 margin-bottom: 0; 
}