Responsive BootStrap 4 Tab

Question

I am using below code for BootStrap 4 tab.

<ul class="nav nav-tabs font-weight-bold">
    <li class="nav-item">
        <a class="nav-link  active" href="#details" data-toggle="tab">Page Details</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#content" data-toggle="tab">Page Content</a>
    </li>
</ul>
<div class="tab-content">
   <div role="tabpanel" class="tab-pane active" id="details">Page Details</div>
   <div role="tabpanel" class="tab-pane fade" id="content">Page Content</div>
</div>

How can I make it responsive so that I can see this tabs even in 100px height and 100px width ?

Answer 1

use this

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

latest bootstrap 4.+ update of navs, works on every screensize

Will shrink to horizontal view if u go below 300px

link for latest bootstrap version

https://getbootstrap.com/