Horizontal scroll through Bootstrap 4 navigation tabs

I'm currently using the newest Bootstrap 4 nav-tabs feature to create tabs and I'm aiming to keep all the tabs in a single horizontal line that can be scrolled.

I've attempted to use various JavaScript plugins, but none of them seem to function properly with Bootstrap 4.

Here's the code I have so far. If anyone is able to contribute a JavaScript function that removes the scrollbar at the bottom, I would greatly appreciate it.

I'm relatively new to JavaScript, so any assistance would be fantastic.

.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  display: -webkit-box;
  display: -moz-box;
}

.nav-tabs>a {
  float: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<body>
  <div class="container-fluid">
    <div class="row flex-row">
      <nav class="tabbable">
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
          <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
          <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
          <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
          <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
          <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
          <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
          <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
          <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
          <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
          <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
          <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
        </div>
      </nav>
      
      <div class="tab-content pt-2" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div>
        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Contact</div>
      </div>
      
    </div>
  </div>
</body>

</html>

htmlcsstabsbootstrap-4

Answer №1

To properly utilize the code snippet, ensure that you place your code within the .row class while using the col grid system. Additionally, you can implement the provided HTML structure and CSS for horizontal scrolling:

.tabbable .nav-tabs {
   overflow-x: auto;
   overflow-y:hidden;
   flex-wrap: nowrap;
}
.tabbable .nav-tabs .nav-link {
  white-space: nowrap;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class="container-fluid">
          <nav class="tabbable">
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
              <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
              <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">My Profile</a>
              <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
              <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
              <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
              <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
              <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
              <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
              <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
              <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
              <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
            </div>
          </nav>
          <div class="tab-content pt-2" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div>
            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Contact</div>
          </div>
        </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent the top of the fifth row from displaying on mobile devices when the first four rows are hidden

My personal website features a collection of user-generated stories, with only the first 4 rows of each story visible in a fading text gradient from black to white. There is a "show more/less" button to reveal or hide the full content. While this layout ...

htmljquerycss

"Troubleshooting: Spring Boot application fails to load

I recently added some bootstrap templates to my resources/templates folder. However, when I start the server and navigate to the URL where I linked the index.html page, the bootstrap styling is not loading. Surprisingly, when I use the Chrome button in Int ...

htmlcssspring

Retrieve data from an HTML table with the power of jQuery

I have a table with the following structure. <form id="myform"> <table> <tr><th>TEST</th> <th>VALUES</th> <th>UNIT</th> <tr><td>Abc</td><td><input type="text" & ...

jqueryhtml

Is there a way to programmatically toggle a button's enabled state depending on the content of a text input field?

I want to create a functionality where a button will be enabled if the value in a textbox is 'mypassword'. If it's not equal to 'mypassword', then the button should be disabled. I've attempted the code below, but it doesn&apos ...

javascripthtmljquery

Homepage divided in two sections akin to the Tumblr landing page

Have you ever visited www.tumblr.com and noticed the '30 reasons...' link on the registration page that slides up and reveals a second page? I've been trying to figure out how they achieve this cool effect. Most tutorials show how to scroll ...

javascriptjqueryhtmlcss

Only IE7 seems to be experiencing a z-index problem with CSS that is not present on any

I’ve encountered a perplexing problem with CSS z-index in IE7 that I just can’t seem to solve. #screen { display: none; background-image: url('/images/bg.png'); background-repeat: repeat; position: fixed; top: 0px; le ...

htmlcssinternet-explorerinternet-explorer-7z-index

Tips for aligning a menu that expands from the side to the center

I'm trying to center the menu on my webpage, but the issue is that it's stretching from the sides. Here's a sample image of the menu layout: I'm struggling to figure out how to fill the empty space on the left side of the menu. ...

htmlcss

CSS/Bootstrap : troubleshooting overflow problem

Experiencing a problem with the popover control due to a display issue. The overflow property had to be set to 'visible' in order to prevent it from being hidden behind the table. overflow:visible; For a repro, please see jsfiddle: http://js ...

csstwitter-bootstrap-3

Always ensure that only one div is visible at a time

I am currently working on a project where I cannot use ng-cloak due to the way the css files are loaded. I have been exploring alternative solutions and have tried a few different approaches. My main goal is to ensure that two icons are never shown at the ...

javascripthtmlangularjs

What is the best way to target an anchor element that includes a particular word using jquery or css?

I attempted $('a[title="*"]').find('contains("PDF")').css({'background-color':'red'}); Unfortunately, this code is not working as expected. To clarify, I am searching for a specific word in the title. ...

jquerycss

What are some effective CSS styles that can be used to illustrate the concept of "loading . . ."?

I've been leveraging the power of blockUI successfully, but now I'm faced with the challenge of dynamically loading a table row. My research indicates that blockUI may not be compatible with HTML table rows. My idea is to use: jquery.AddClass(" ...

htmlcssajaxrowcss-tables

Customizing an external module class using CSS module pattern in React

Is there a way to locally override an external module's CSS class for a specific component? Here is my current code: import `style` from './style.module.css' // local CSS module import `ExternalComponent` from 'ExternalComponent&apos ...

cssreactjscss-modulesreact-css-modulesbabel-plugin-react-css-modules

Expand the HTML Template and Resize Children to Fit the Window

My software creates HTML email templates that typically range from 600px to 650px in width, but can sometimes be as wide as 900px. The templates have nested table elements for email clients, with all dimensions specified in fixed pixels rather than relativ ...

javascripthtmlmeta-tagsviewportemail-templates

Navigation Menu Spanning Across Full Width of All Screens

Hello! I am currently working on designing a responsive menu using HTML5 and CSS. My approach involves creating a navigation menu for desktop computers and implementing a checkbox with a label to reveal the responsive menu when needed. Here is the code s ...

csshtml

Choosing the relevant kendo row on two different pages

I am facing a situation where I have a Kendo grid displayed on a dashboard page. Whenever a user selects a row in this grid, I need to load the same row in another Kendo grid on a separate ticket page to showcase the details of that particular ticket. The ...

javascripthtmljquerykendo-uikendo-grid

Optimizing SEO with asynchronous image loading

I've been developing a custom middleman gem that allows for asynchronous loading of images, similar to the effect seen on Medium. Everything is functioning smoothly, but I'm uncertain about the impact on SEO. The image tag in question looks like ...

javascripthtmlseo

Resolving the Material-UI NextJS Button Styling Dilemma

I've encountered an issue with the styling of a few buttons in JS. When I apply a styling class using className, the formatting works fine on the initial render but loses its styling on subsequent refreshes. This problem is specific to two individual ...

htmlcssreactjsmaterial-uinext.js

Is it permissible to have empty elements in HTML for accessibility purposes?

Can you help me with a question I have? I was informed that utilizing code like the following is not recommended for creating accessible HTML: <span class="fa-stack fa-lg"> <i class="fa fa-cloud fa-stack-2x"></i> <i class="fa fa-c ...

htmlaccessibilityscreen-readers

Variations in CSS Stylesheets for Various Parts of the Body

Currently, I am in the process of creating a single page website. One issue that I have encountered is needing a Bootstrap "modal" class popup to appear when a button is clicked. However, the template I am utilizing was designed using Bootstrap Version 1, ...

csstwitter-bootstrapmodal-dialogtwitter-bootstrap-3stylesheet

The size of the website elements needs to be increased for better visibility on mobile devices

While developing the official website for my Discord bot - Idle Baker, I opted to utilize Bootstrap 5 for its user-friendly design features, making it easier than dealing with extensive CSS coding. After completing the homepage of the site, I encountered ...

htmlcssmobile-websitebootstrap-5