How to Add Deep Linking to the Bootstrap 4 Tabs Component




How to Add Deep Linking to the Bootstrap 4 Tabs Component

Hi Guys,

Now, let's see tutorial of bootstrap 4 tab deep link. We will look at example of bootstrap 4 nav tabs link to tab.

In this article, we will implement a how to add deep linking to the bootstrap 4 tabs component. i would like to share with you bootstrap 4 add deep linking to the tab component.


<!DOCTYPE html>



<link rel="stylesheet" href="">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- custom CSS -->

<link rel="stylesheet" href="css/main.css">

<title>How to Add Deep Linking to the Bootstrap 4 Tabs Component</title>



<!-- content here -->

<script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- custom JS -->

<script src="js/main.js"></script>

<ul class="nav nav-mytabs" id="myTab" role="tablist">

<li class="nav-item">

<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>


<li class="nav-item">

<a class="nav-link" id="history-tab" data-toggle="tab" href="#history" role="tab" aria-controls="history" aria-selected="false">History</a>


<li class="nav-item">

<a class="nav-link" id="city-attractions-tab" data-toggle="tab" href="#city-attractions" role="tab" aria-controls="city-attractions" aria-selected="false">City Attractions</a>



<div class="tab-content mytab-content" id="myTabContent">

<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">

<!-- content here -->


<div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">

<!-- content here -->


<div class="tab-pane fade" id="city-attractions" role="tabpanel" aria-labelledby="city-attractions-tab">

<!-- content here -->



<script type="text/javascript">

$(document).ready(() => {

let url = location.href.replace(/\/$/, "");

if (location.hash) {

const hash = url.split("#");

$('#myTab a[href="#'+hash[1]+'"]').tab("show");

url = location.href.replace(/\/#/, "#");

history.replaceState(null, null, url);

setTimeout(() => {


}, 400);


$('a[data-toggle="tab"]').on("click", function() {

let newUrl;

const hash = $(this).attr("href");

if(hash == "#home") {

newUrl = url.split("#")[0];

} else {

newUrl = url.split("#")[0] + hash;


newUrl += "/";

history.replaceState(null, null, newUrl);






It will help you...

#Bootstrap 4