Issues with nav-tab content display while changing from bootstrap3 to bootstrap 4

I have downloaded a Free Admin Template Based On Twitter Bootstrap 3.x from Metis. and I decide to use bootstrap4.0 beta. I have a slight change in the layout but the notable issue is that the nav-tab is not switching.

Here is the HTML5 Code:

`<div class="form-signin">
<div class="text-center">
<img src="assets/img/logo.png" alt="Metis Logo">
</div>
<hr>
<div class="tab-content">
<div id="login" class="tab-pane active">
<form action="index.html">
<p class="text-muted text-center">
Enter your username and password
</p>
<input type="text" placeholder="Username" class="form-control top">
<input type="password" placeholder="Password" class="form-control bottom">
<div class="checkbox">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign 
in</button>
</form>
</div>
<div id="forgot" class="tab-pane">
<form action="index.html">
<p class="text-muted text-center">Enter your valid e-mail</p>
<input type="email" placeholder="mail@domain.com" class="form-control">
<br>
<button class="btn btn-lg btn-danger btn-block" type="submit">Recover 
Password</button>
</form>
</div>
<div id="signup" class="tab-pane">
<form action="index.html">
<input type="text" placeholder="username" class="form-control top">
<input type="email" placeholder="mail@domain.com" class="form-control 
middle">
<input type="password" placeholder="password" class="form-control middle">
<input type="password" placeholder="re-password" class="form-control 
bottom">
<button class="btn btn-lg btn-success btn-block" 
type="submit">Register</button>
</form>
</div>
</div>
<hr>
<div class="text-center">
<ul class="list-inline">
<li><a class="text-muted" href="#login" data-toggle="tab">Login</a></li>
<li>
<a class="text-muted" href="#forgot" data-toggle="tab">Forgot  Password</a>
 </li>
<li><a class="text-muted" href="#signup" data-toggle="tab">Signup</a></li>
</ul>
</div>
</div>`

What I am actually trying to achieved here is to have both signIn, SignUp and Forgot Password to staked in one card. So I can switch the various views from the nav-tabs I have seen a couple of this bot are build on bootstrap 3. Please if anyone knows how it can be done in bootstrap 4. Help me here please. I appreciate you in advance.