Can't get bootstrap 4 tabs to work with blade - html

Question

I have a little problem here, trying to design a profile but can't get bootstrap 4 tabs to work. Here's the profile page code.
#extends('layouts.core')
#section('content')
<div class="content">
<div class="row profile-content">
<div class="col-sm-3">
<h2>Profile Information</h2>
<ul class="list-group">
<li class="list-group-item">
Name : {{$post->name}}
</li>
<li class="list-group-item">
Email : {{$post->email}}
</li>
<li class="list-group-item">
Verified :
#if($post->email_verified_at)
Yes
#else
No
#endif
</li>
</ul>
</div>
<div class="col-md">
<h2>Posted Products</h2>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab"
data-toggle="pill" href="#pills-home" role="tab"
aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab"
data-toggle="pill" href="#pills-profile" role="tab"
aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab"
data-toggle="pill" href="#pills-contact" role="tab"
aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home"
role="tabpanel" aria-labelledby="pills-home-tab">
#foreach($query as $row)
<div class="product-card" role="tab">
<div class="card">
<div class="card-head">
<img class="card-img-top"
src="/storage/products/{{$row->image}}"
alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">
<a href="/product/{{$row->unique_id}}">
{{$row->name}}
</a>
</h5>
<p class="card-text">{{$row->price}}$</p>
<p class="card-text">
#if($row->stock==0)
<span style="color:red;">
Not Available
</span>
#else
Stock : {{$row->stock}}
#endif
</p>
</div>
<div class="card-body text-center">
<a href="/product/{{$row->unique_id}}"
class="btn btn-primary">
<i class="fas fa-info-circle mr-2"></i>
Details
</a>
#if(Auth::user())
#if(!$row->stock==0)
<a href="/add/{{$row->unique_id}}/1"
class="btn btn-success mr-2">
<i class="fas fa-cart-plus mr-2"></i>
Add To Cart
</a>
#endif
#endif
</div>
#if(Auth::user()->is_admin || $row->by == Auth::user()->email)
<form class='col text-center p-0'
action="{{ action('PostsController#destroy' , $row->id)}}"
onsubmit="return confirm('Are you sure you want to delete ?');" class="text-right" method="POST">
<a class="btn btn-danger w-100">
<i class="fas fa-trash-alt" style="color:white;"></i>
<input type='submit' class='none' name="_method" value="Delete">
</a>
{{ csrf_field() }}
</form>
#endif
</div>
</div>
#endforeach
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel"
aria-labelledby="pills-profile-tab">
AAAAAAAAAAAAAAAAAA
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel"
aria-labelledby="pills-contact-tab">
...
</div>
</div>
<div class="links">
{{$query->links()}}
</div>
</div>
</div>
#endsection
The javascript just appends the content from the other tabs to this current page. I dont know what's the deal. I want the first tab to display the user posts and when i will click on the second tab i want it to replace everything that's showing currently.