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>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>Horizontally scrollable tabs focus on center with snap in flutter
Same can be achieved using - unselectedLabelColor: & indicatorColor: of TabBar widget.
Example Code:
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 6,
child: Scaffold(
appBar: AppBar(
centerTitle: true,
leading: Icon(Icons.person_outline),
title: Text('DASHBOARD',style: TextStyle(fontSize: 16.0),),
bottom: PreferredSize(
child: TabBar(
isScrollable: true,
unselectedLabelColor: Colors.white.withOpacity(0.3),
indicatorColor: Colors.white,
tabs: [
Tab(
child: Text('Tab 1'),
),
Tab(
child: Text('Investment'),
),
Tab(
child: Text('Your Earning'),
),
Tab(
child: Text('Current Balance'),
),
Tab(
child: Text('Tab 5'),
),
Tab(
child: Text('Tab 6'),
)
]),
preferredSize: Size.fromHeight(30.0)),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Icon(Icons.add_alert),
),
],
),
body: TabBarView(
children: <Widget>[
Container(
child: Center(
child: Text('Tab 1'),
),
),
Container(
child: Center(
child: Text('Tab 2'),
),
),
Container(
child: Center(
child: Text('Tab 3'),
),
),
Container(
child: Center(
child: Text('Tab 4'),
),
),
Container(
child: Center(
child: Text('Tab 5'),
),
),
Container(
child: Center(
child: Text('Tab 6'),
),
),
],
)),
);
}
Output:
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
How to create a horizontal-scrolling nav in Bootstrap?
First you need to tell the ul to not wrap and overflow into a scroll bar. Then the li elements need to not be floated and display inline. This will do it:
ul.nav {
white-space: nowrap;
overflow-x: auto;
}
ul.nav li {
display: inline-block;
float: none;
}
Fiddle: http://jsfiddle.net/bmfcd3zt/8/
Horizontal Tab based menu with scrolling tabs
You can do this with Owl Carousel 2. As you can see you can horizontally scroll tabs with mouse drag and there is no horizontal scroll bar. Also I used the responsive option to adjust number of showing tabs on different widths but you can modify that. Here is a Fiddle and another Fiddle with arrows.
//OWL Carousel$('.tabs').owlCarousel({ loop: true, nav: false, dots: false, responsive: { 0: {items: 2}, 250: {items: 3}, 400: {items: 4}, 500: {items: 5} }});
//Tabs$('.tabs li a').click(function() { var activeLink = $(this).data('target'); var targetTab = $('.tab.'+activeLink); targetTab.siblings().removeClass('active'); targetTab.addClass('active');});body { background: white;}
a { color: white; text-decoration: none; font-size: 12px; text-transform: uppercase;}
ul { list-style-type: none; max-width: 500px; margin: 2px auto; background: #353434; padding: 0;}
.tab-content { max-width: 500px; border: 1px solid black; margin: 0 auto;}
.owl-controls { display: none;}
li { display: inline-block; padding: 10px 20px; white-space: nowrap; transition: all 0.3s ease-in; border-bottom: 4px solid transparent;}
li:hover { border-bottom: 4px solid white; opacity: 0.7; cursor: pointer;}
.tab-content > div { display: none;}
.tab-content > div.active { display: block;}
.info { text-align: center;<link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/><link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script src="http://owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<p class="info">Grab and drag tabs for scroll</p>
<ul class="tabs"> <li class="item"><a data-target="tab-one">Tab One</a></li> <li class="item"><a data-target="tab-two">Tab Two</a></li> <li class="item"><a data-target="tab-three">Tab Three</a></li> <li class="item"><a data-target="tab-four">Tab Four</a></li> <li class="item"><a data-target="tab-five">Tab Five</a></li> <li class="item"><a data-target="tab-six">Tab Six</a></li> <li class="item"><a data-target="tab-seven">Tab Seven</a></li> <li class="item"><a data-target="tab-eight">Tab Eight</a></li></ul>
<div class="tab-content"> <div class="tab tab-one active">One <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, iusto!</div> <div class="tab tab-two">Two <br> Lorem ipsum dolor sit amet, consectetur</div> <div class="tab tab-three">Three</div> <div class="tab tab-four">Four</div> <div class="tab tab-five">Five</div> <div class="tab tab-six">Six</div> <div class="tab tab-seven">Seven</div> <div class="tab tab-eight">Eight</div></div>How to remove horizontal scrollbar in tab function
In Bootstrap.min.css
Change line:9 with
.tab-content
{
overflow:hidden;
}
Related Topics
Bootstrap 3 Apply CSS on Mobile View Only
Is There an Advantage in Grouping CSS Media Queries Together
Animate the CSS Transition Property Within :After/:Before Pseudo-Classes
Svg Height Incorrectly Calculated in Webkit Browsers
Recording and Saving an Svg Animation as an Animated Gif
Vertical Align Center Image in Fixed Size Div
Using Mixins in Bootstrap 3 to Avoid Unsemantic Markup for Layout Structure
What Does the Scalez() CSS Transform Function Do
Semantic Grid with Bootstrap + Less Mixins ¿ How
CSS Selector for Disabled Input Type="Submit"
Is There Polyfill for CSS Transform Property in IE8
Adding a Dotted Line Trail After Menu Description
Style Using Nth-Child to Keep Table's Aspect (Alternating Row Colors) Updated
How Does CSS Formatting in a Google Maps Bubble Work
Realtime CSS/Scss Edition with Meteor Avoiding Server Restart