How to force tab-navigation to stay in place using Bootstrap ?

Tab-navigation: Tabs are made with <ul class="nav nav-tabs"> and we use the <li class="active"> element to mark the current page. To fix the position of navigation tab style, position: fixed; property is used.

Syntax:

<ul class="nav nav-tabs" id="myTab" role="tablist">
 <li class="nav-item">
 <a class="nav-link active" href="#home" data-toggle="tab">Home</a>
 </li>
 . . .
</ul>
<div class="tab-content">
 <div class="tab-pane fade show active" id="home">content....</div>
 . . .
</div>

Example:

Output: 👁 Image