Bootstrap dynamic pills only work once? - css

Question

I'm creating a Sign in/up form. If the login form is displayed then there is a button below Sign up and if you click it then the login form fades and the Sign up form fades in. Then once the Sign up form is displayed clicking Sign in would make the login form be displayed.
However, it only works one time. My client sent me a website template they purchased and wanted me to modify. There are custom CSS files thousands of lines long and it came with it's own version of Bootstrap (CSS and JavaScript) and I'm not sure how they may have modified it. I'm hoping the problem is me and not the template because that would be a nightmare.
Here is my login form/dynamic pill:
<!-- SIGN IN/UP FORM -->
<div class="form-custom text-center container bg-white">
<img src="images/logo.png" alt="">
<!-- TAB CONTENT -->
<div class="tab-content">
<div id="signin" class="tab-pane fade in active">
<!--SIGN IN-->
<form action="" method="post" class="mb-3">
<div class="container px-4">
<input class="form-style" type="email" name="email" placeholder="Email">
<input class="form-style" type="password" name="password" placeholder="Password">
</div>
</form>
<!--SIGN IN-->
</div>
<div id="signup" class="tab-pane fade">
<!--SIGN UP-->
<form action="" method="post" class="mb-3">
<div class="container px-4">
<input class="form-style" type="text" name="first_name" placeholder="First Name">
<input class="form-style" type="text" name="last_name" placeholder="Last Name">
<input class="form-style" type="email" name="email" placeholder="Email">
<input class="form-style" type="password" name="password" placeholder="Password">
</div>
</form>
<!--SIGN UP-->
</div>
</div>
<!-- TAB CONTENT -->
<ul class="nav nav-pills">
<div class="container">
<div class="d-flex flex-row justify-content-center">
<li class="active">
<button data-toggle="pill" href="#signin" class="btn btn-sign">Sign in</button>
</li>
<li>
<button data-toggle="pill" href="#signup" class="btn btn-sign">Sign up</button>
</li>
</div>
</div>
</ul>
</div>
<!-- SIGN IN/UP FORM -->
And then my own style classes compiled from Sass:
.form-custom {
position: absolute;
top: 35vh;
left: calc(90vw - 475px);
width: 475px;
z-index: 5000;
}
#media (max-width: 575.98px) {
.form-custom {
width: 420px;
left: calc(90vw - 420px);
}
}
#media (max-width: 500px) {
.form-custom {
width: 375px;
left: calc(90vw - 375px);
}
}
#media (max-width: 400px) {
.form-custom {
width: 275px;
left: calc(90vw - 275px);
}
}
.form-style {
display: block;
width: 100%;
border-top: 0px;
border-right: 0px;
border-left: 0px;
font-size: 1rem;
}
.form-style:focus {
outline-color: transparent;
}
.btn-sign {
display: inline;
margin: 0px 20px 0px 20px;
border-radius: 0px;
width: 180px;
}
#media (max-width: 575.98px) {
.btn-sign {
width: 162px;
}
}
#media (max-width: 500px) {
.btn-sign {
width: 126px;
}
}
#media (max-width: 400px) {
.btn-sign {
width: 90px;
}
}
Any help would be much appreciated. If additional details are needed please let me know. Thanks.

Answer 1

I commented out the container and flex div's and that fixed the problem.
<ul class="nav nav-pills">
<li class="active">
<button data-toggle="pill" href="#signin" class="btn btn-sign">Sign in</button>
</li>
<li>
<button data-toggle="pill" href="#signup" class="btn btn-sign">Sign up</button>
</li>
</ul>