Tab-Content Layout shows up in other tab - html

Question

I'm working on a Spring-Boot application using Thymeleaf. Bootstrap4 is the CSS framework I'm using. I'm using nav-tabs for the profile page and the first three tabs don't have any issues but when I click on the address tab and go to any other tab, the content of the Address tab, shows up in the other tabs at the bottom of that tabs content and I cannot figure out why. I'll be including images of the outcome and css of each starting tab. I am hesitant to include the entire page html due to the amount of lines currently (480 total)
<div class="tab-pane fade" id="tab-3" role="tabpanel" th:classappend="${classActiveBilling}? 'in active show'">
<div class="card">
<div class="card-body">
<div class="card-title">
<div class="container">
<div class="row">
<div class="col">
<h4 class="mb-0 align-middle" style="margin-top: 15px;">Billing Information</h4>
</div>
</div>
<div class="row">
<div class="col">
<div class="breadcrumb" style="background-color:transparent;">
<a class="breadcrumb-item active" th:href="#{/listOfCreditCards}" th:style="${listOfCreditCards}? 'color:#6e45e0'">List of Credit Cards</a>
<a class="breadcrumb-item active" th:href="#{/addNewCreditCard}" th:style="${addNewCreditCard}? 'color:#6e45e0'">Add/Update Credit Card</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-4" role="tabpanel" th:classappend="${classActiveShipping}? 'in active show'">
<div class="card">
<div class="card-body">
<div class="card-title">
<div class="container">
<div class="row">
<div class="col">
<h4 class="mb-0 align-middle" style="margin-top: 15px;">Shipping Information</h4>
</div>
</div>
<div class="row">
<div class="col">
<div class="breadcrumb" style="background-color:transparent;">
<a class="breadcrumb-item active" th:href="#{/listOfShippingAddresses}" th:style="${listOfShippingAddresses}? 'color:#6e45e0'">List of Shipping Addresses</a>
<a class="breadcrumb-item active" th:href="#{/addNewShippingAddress}" th:style="${addNewShippingAddress}? 'color:#6e45e0'">Add/Update Shipping Address</a>
</div>
</div>
</div>

Answer 1

The breadcrumbs were the culprit. It was causing the shipping tab to show up in other windows. I just changed it to a button group and get the same effect. I unfortunately could not get the breadcrumbs themselves to work regardless of how many times I worked on the css so just threw it out completely. Semi answer, but thymeleaf is touchy and doesn't always play nice with frameworks.