Pure CSS Adaptive Bootstrap Tabs

Category: CSS & CSS3 , Layout | July 3, 2017
Author: mladenplavsic
Views Total: 3,710 views
Official Page: Go to website
Last Update: July 3, 2017
License: MIT


Pure CSS Adaptive Bootstrap Tabs


A pure CSS solution for mobile-friendly bootstrap tabs component that makes all extra tabs available through dropdown “More tabs” if there is no room for them.

How to use it:

Include the bootstrap-adaptive-tabs.css in the head section of your web page.

<link href="bootstrap-adaptive-tabs.css" rel="stylesheet">

Add the CSS class bs-adaptive-tabs to your Bootstrap Tabs’ tabbed navigation.

<ul role="tablist" class="nav nav-tabs bs-adaptive-tabs" id="myTab">



  • Fixed:after Resizing to less than 768px the tabs are not selecteable

You Might Be Interested In:

One thought on “Pure CSS Adaptive Bootstrap Tabs

  1. Mohan

    Hi mladenplavsic,
    Is there an updated version for this code using the latest bootstrap like 4.3.1?


Leave a Reply