I have a group of five bootstrap navigation tabs that are evenly spaced and visually appealing on desktop screens. However, when viewed on a mobile device, the text within the tabs becomes cramped together. How can I make the tabs stack vertically on mobile devices?
https://i.stack.imgur.com/N0zst.png
These tabs are located in the center of the page, so I would like them to neatly stack on top of each other when accessed via mobile.
Feel free to check out my Bootply example here: http://www.bootply.com/nM8Q1MftKU
Here is a snippet of my HTML code for reference:
<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"><a href="#pane1" data-toggle="tab">ELECTRONIC<br>APPLE TREES</a></li>
...
(The rest of the HTML code remains the same)
</div>
<!-- /.tab-content -->
</div>
<!-- /.tabbable -->
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-c -->
Additionally, this is the CSS styling related to the navigation tabs:
.content-section-c {
padding: 50px 0;
background-color: #d4d4d4;
}
...
(The rest of the CSS code stays unchanged)