Scroll Bootstrap 4 Nav-Tabs Horizontally

Scroll Bootstrap 4 nav-tabs horizontally

Here, You have add your code inside .row. but, would be used .row. when your are use col grid system. Here, You can use following Html structural & css for horizontal scrolled. 

.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>

How to make nav-tabs scroll horizontally in bootstrap 3?

ul {
    display: flex;
    flex-direction: row;
}

.nav-tabs > li > a {
    height: 100%;
}

/** Optionally if you don't want word wrap **/
.nav-tabs > li {
    white-space: nowrap;
}

.headerContainer {
    width: fit-content;
}
<!-- Latest compiled and minified CSS -->
<div class="headerContainer">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<nav class="wrapper">
  <ul class="nav nav-tabs">
    <li class="nav-item active" role="presentation"><a href="#001" aria-controls="001" role="tab">EDENRED</a></li>
    <li class="nav-item" role="presentation"><a href="#002" aria-controls="002" role="tab">DAY</a></li>
    <li class="nav-item" role="presentation"><a href="#003" aria-controls="003" role="tab">SODEXO</a></li>
    <li class="nav-item" role="presentation"><a href="#004" aria-controls="004" role="tab">GRUPPO PELLEGRINI</a></li>
    <li class="nav-item" role="presentation"><a href="#005" aria-controls="005" role="tab">COMPASS GROUP - RISTOMAT</a></li>
    <li class="nav-item" role="presentation"><a href="#006" aria-controls="006" role="tab">QUI</a></li>
    <li class="nav-item" role="presentation"><a href="#007" aria-controls="007" role="tab">CIR BLUTICKET</a></li>
    <li class="nav-item" role="presentation"><a href="#008" aria-controls="008" role="tab">JAKALA</a></li>
    <li class="nav-item" role="presentation"><a href="#009" aria-controls="009" role="tab">MIG FOR YOU</a></li>
    <li class="nav-item" role="presentation"><a href="#010" aria-controls="010" role="tab">SODEXO GIFT</a></li>
  </ul>
</nav></div>

How can I make a bootstrap navbar/tab section scrollable horizontally?

Its wrapping cause its a flex item and has flex-wrap:wrap on it. I've changed it for you and added a few other properties for the scrollbars to appear.

Code:

.nav-tabs {
   flex-wrap: nowrap;
   overflow-x: auto;
   overflow-y:hidden;
 }

Example

Scrolling Tabs in Bootstrap 4

You should incrementally move the tabs "width of hidden", but no more than wrapper width... 

var widthOfHidden = function(){

    var ww = 0 - $('.wrapper').outerWidth();
    var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;

    if (ww>hw) {
        return ww;
    }
    else {
        return hw;
    }

};

var getLeftPosi = function(){

    var ww = 0 - $('.wrapper').outerWidth();
    var lp = $('.list').position().left;

    if (ww>lp) {
        return ww;
    }
    else {
        return lp;
    }
};

And then "readjust" after each movement to determine whether or not the scroll arrows still need to show...

$('.scroller-right').click(function() {

  $('.scroller-left').fadeIn('slow');
  $('.scroller-right').fadeOut('slow');

  $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
    reAdjust();
  });
});

$('.scroller-left').click(function() {

    $('.scroller-right').fadeIn('slow');
    $('.scroller-left').fadeOut('slow');

    $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
        reAdjust();
    });
});

Demo: https://www.codeply.com/go/Loo3CqsA7T

Also, you can improve the position of the last tab by making sure it's right position is never less than wrapper width to keep it aligned to the right edge...

var widthOfHidden = function(){

    var ww = 0 - $('.wrapper').outerWidth();
    var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
    var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());

    if (ww>hw) {
        return (rp>ww?rp:ww);
    }
    else {
        return (rp>hw?rp:hw);
    }
};

nav-tabs Not Scrolling with overflow-x: scroll

Use display:block!important; to .nav instead display:flex

.nav {

  white-space: nowrap;

  display:block!important;

  flex-wrap: nowrap;

  max-width: 100%;

  overflow-x: scroll;

  overflow-y: hidden;

  -webkit-overflow-scrolling: touch

}

.nav li {

  display: inline-block

}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">

  <li class="nav-item px-1">

    <a class="nav-link active">Active Tab</a>

  </li>

  <li class="nav-item px-1">

    <a class="nav-link">Tab</a>

  </li>

  <li class="nav-item px-1">

    <a class="nav-link">Tab</a>

  </li>

    <li class="nav-item px-1">

    <a class="nav-link active">Active Tab</a>

  </li>

  <li class="nav-item px-1">

    <a class="nav-link">Tab</a>

  </li>

  <li class="nav-item px-1">

    <a class="nav-link">Tab</a>

  </li>

    <li class="nav-item px-1">

    <a class="nav-link active">Active Tab</a>

  </li>

  <li class="nav-item px-1">

    <a class="nav-link">Tab</a>

  </li>

  <li class="nav-item px-1">

    <a class="nav-link">Tab</a>

  </li>

</ul>

Bootstrap horizontal scrollable tab bar

Here is an example:

(Not working in snippet for some reason, so here is a link to Bootply : http://www.bootply.com/oROUAMwsG1)

.nav-tabs {

  overflow-x: auto;

  overflow-y: hidden;

  display: -webkit-box;

  display: -moz-box;

}

.nav-tabs>li {

  float: none;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <div class="col-md-4">

    <div class="tabbable">

      <ul class="nav nav-tabs">

        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a>

        </li>

        <li><a href="#tab2" data-toggle="tab">Section 2</a>

        </li>

        <li><a href="#tab2" data-toggle="tab">Section 3</a>

        </li>

        <li><a href="#tab2" data-toggle="tab">Section 4</a>

        </li>

        <li><a href="#tab2" data-toggle="tab">Section 5</a>

        </li>

        <li><a href="#tab2" data-toggle="tab">Section 6</a>

        </li>

        <li><a href="#tab2" data-toggle="tab">Section 7</a>

        </li>

      </ul>

      <div class="tab-content">

        <div class="tab-pane active" id="tab1">

          <p>I'm in Section 1.</p>

        </div>

        <div class="tab-pane" id="tab2">

          <p>I'm in Section 2.</p>

        </div>

      </div>

    </div>

  </div>

</div>

Bootstrap overflow scrolling tabs

Bootstrap 4 (update 2019)

Scrolling Tabs in Bootstrap 4, or overflow to a dropdown: https://codeply.com/go/j2DdSGQg0s

Bootstrap 3 (original answer)

Here is a horizontal scrolling tabs example for Bootstrap 3. You may need to tweak the style of the next/prev arrows accordingly..

http://bootply.com/128029


Related Topics

Force Transition to Complete on Hover CSS

Is There a CSS Selector Which Selects an Element Outside the Current Element

How to Vertically Align a Div Next to an Image

Double Dotted Border While Using Colspan

How to Vertically Align a <Table> in the Middle of a Fixed Height <Div>

Why Is My Bootstrap Navbar Not Displaying Inline

Page Break Is Not Working with the Tbody Issue

Small Padding, Big Difference

Why Is a Div Longer Than Several Spans with the Same Content (Only in Chrome)

How to Space These Images Inside of a Bootstrap 3 Grid System

Changing Background Color of Ionic Ion-Item in CSS

Rounded Corners on Rectangular Image Using CSS Only

Display:Table Versus Using Tables

How to Center Something If I Don't Know Ahead of Time What the Width Is

How to Prevent Chrome from Changing Font When Autofilling Username/Password

How to Make Flash Animation Responsive

How to Make Select Elements Shrink to Max-Width Percent Style Within Fieldset

Half Background Color for Div


Leave a reply



Submit