On mobile, how do I stack my bootstrap nav tabs vertically? - html

Question

I have five bootstrap nav tabs that are evenly spaced and look great on desktop. On mobile the text of the tabs get squished together. On mobile, how do I have the tabs stack vertically?
It's in the middle of the page so I'd like the five tabs to stack on mobile.
Here's my bootply:
http://www.bootply.com/nM8Q1MftKU
Here's my HTML:
<div class="content-section-c">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Sample Search Results</h2>
</div>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">ELECTRONIC<br>APPLE TREES</li>
<li>CROSSING GUARD<br>ORANGE TREES</li>
<li>POLICE BODY<br>PEARS TREES</li>
<li>PARKING METERS<br> </li>
<li>TRANSPORTATION<br>GRAPES TREES</li>
</ul>
<div class="tab-content">
<div id="pane1" class="tab-pane active">
<p class="results">126 Results Founds</p>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div>
</div>
<div id="pane2" class="tab-pane">
<p class="results">75 Results Founds</p>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/05_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/06_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/07_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/08_card.png"></div>
</div>
<div id="pane3" class="tab-pane">
<p class="results">144 Results Founds</p>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/09_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/10_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/11_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/12_card.png"></div>
</div>
<div id="pane4" class="tab-pane">
<p class="results">170 Results Founds</p>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div>
</div>
<div id="pane5" class="tab-pane">
<p class="results">256 Results Founds</p>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
<div class="col-md-6 col-xs-12">
<img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div>
</div>
</div>
<!-- /.tab-content -->
</div>
<!-- /.tabbable -->
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-c -->
Here's my CSS:
.content-section-c {
padding: 50px 0;
background-color: #d4d4d4;
}
h2 {
font-family: 'Lato', sans-serif;
font-weight: 700;
color: #3C5A78;
line-height: 1;
text-align: center;
padding: 0 0 16px 0;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #e9a39c;
font-weight: bold;
background-color: #d4d4d4 !important;
}
.nav-tabs>li>a:hover {
border: 1px solid transparent;
}
.nav>li>a:focus,
.nav>li>a:hover {
background-color: #d4d4d4;
}
.nav-tabs {
border-bottom: none;
display: inline-block;
/* needed to center the list items */
}
.tabbable {
text-align: center;
}
.results {
font-family: 'Merriweather', serif;
font-weight: 300;
color: #355A78;
font-size: 16px;
margin: 20px 0 5px 0;
text-align: left;
}
.nav-tabs {
width: 100%
}
.nav-tabs > li {
width: 20%;
}

Answer 1

Change the width of the nav-tabs > li in mobile sizes
#media screen and (max-width:767px){
.nav-tabs > li {width:100%;}
}

Answer 2

You could consider a collapsing navbar. See your example on bootply. On small screens there will be the three vertical lines to open the navbar navigation instead of showing all possible links on one vertical line.
Desktop:
Mobile:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">ELECTRONIC<br>APPLE TREES</li>
<li>CROSSING GUARD<br>ORANGE TREES</li>
<li>POLICE BODY<br>PEARS TREES</li>
<li>PARKING METERS<br> </li>
<li>TRANSPORTATION<br>GRAPES TREES</li>
</ul>
</div>
</div>
</nav>