<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <!-- Navigation Buttons --> <div class="col-md-3"> <ul class="nav nav-pills nav-stacked" id="myTabs"> <li class="active"><a href="#home" data-toggle="pill">Home</a></li> <li><a href="#profile" data-toggle="pill">Profile</a></li> <li><a href="#messages" data-toggle="pill">Messages</a></li> </ul> </div> <!-- Content --> <div class="col-md-9"> <div class="tab-content"> <div class="tab-pane active" id="home">Home</div> <div class="tab-pane" id="profile">Profile</div> <div class="tab-pane" id="messages">Messages</div> </div> </div> </div> <script> // Javascript to enable link to tab var hash = document.location.hash; if (hash) { console.log(hash); $(".nav-stacked a[href=\\"+hash+"]").tab('show'); } // Change hash for page-reload $('.nav-stacked a').on('shown.bs.tab', function (e) { window.location.hash = e.target.hash; }); </script>