CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Angelo
Angelo

Reputation: 427

Bootstrap 3 horizontal tabs on desktop, vertical tabs on mobile

I have the following code 

<div class="row">
<h4>Categories</h4>
<ul class="nav nav-tabs">
    <li role="presentation"><a href="#0" class="thumbnail">All Categories</a></li>
    <li><a href="#1" class="thumbnail">Computers</a></li>
    <li><a href="#1" class="thumbnail">Vehicles</a></li>
    <li><a href="#1" class="thumbnail">Firearms</a></li>
</ul>
</div>

which produces this on desktop browsers

enter image description here

but on mobile it looks like this

enter image description here

If I add class nav-stacked to the ul I get what I am looking for on mobile like so:

enter image description here

but it is also stacked on desktop. I would like the tabs to be horizontal as in the first image on desktop browsers, but vertical tabs on mobile. How can this be accomplished?

Upvotes: 1

Views: 7155

Answers (2)

knittl
knittl

Reputation: 265161

Consider using justified navs. They will be stretched to the width of their parent container on large viewports and stacked vertically on small screens.

<ul class="nav nav-tabs nav-justified">
  ...
</ul>

Or, you can add a media query which mimics the behavior of .nav-justified:

@media (max-width:768px) {
    .nav-tabs > li {
        display:block;
        float:none;
    }
}

Upvotes: 3

Tharun Kumar
Tharun Kumar

Reputation: 53

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
function resize() {
    if ($(window).width() < 768) {
     $('.nav-tabs').addClass('nav-stacked');
    }
    else {$('.nav-tabs').removeClass('nav-stacked');}
}

$(document).ready( function() {
    $(window).resize(resize);
    resize();
});
</script>
</head>

<body>
<div class="row">
<h4>Categories</h4>
<ul class="nav nav-tabs">
    <li role="presentation"><a href="#0" class="thumbnail">All Categories</a></li>
    <li><a href="#1" class="thumbnail">Computers</a></li>
    <li><a href="#1" class="thumbnail">Vehicles</a></li>
    <li><a href="#1" class="thumbnail">Firearms</a></li>
</ul>
</div>
</body>
</html>

Upvotes: 0

Related Questions