bootstrap- how to change nav tab active to underline? - css

Question

I am using bootstrap active tab pane and currently it looks like this:
I want to make it look like this:
where the active tab is underline yellow.
My nav tab:
<p>DASHBOARD</p>
<!-- Nav tabs -->
<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="sign-up-tab" data-toggle="tab" href="#sign-up" role="tab" aria-controls="sign-up" aria-selected="false">Sign-up</a>
</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="login" role="tabpanel" aria-labelledby="login-tab">
<div class="card-body" style="background-color:#ffff; min-height:100%; border-radius:20px;">
<form method="POST" action="{{ route('login') }}">
#csrf
<div class="form-row mb-2">
<div class="input-group col-12">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input class="form-control #error('email') is-invalid #enderror" type="email" name="email" id="email" placeholder="Your email address">
</div>
<div class="col-12">
#error('email')
<span class="text-danger mt-1" role="alert">
{{ $message }}
</span>
#enderror
</div>
</div>
<div class="form-row mb-2">
<div class="input-group col-12">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-key"></i></span>
</div>
<input class="form-control" type="password" name="password" id="password" placeholder="Your password">
</div>
</div>
<div class="row">
<div class="col-5 mb-1">
<div class="form-check">
<input class="form-check-input remember-check" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label text-dark" style="padding-top: 1px;" for="remember">
Remember me
</label>
</div>
</div>
<div class="col-6 text-right mb-1">
#if (Route::has('password.request'))
Forgot Password?
#endif
</div>
</div>
<div class="row">
<div class="col-12 text-center mb-1">
<button type="submit" class="btn login-btn">Login</button>
</div>
</div>
<div class="row mt-1">
<div class="col-5 offset-3">
<p class="text-dark">By signing in, you agree to the
terms and conditions.
</p>
</div>
</div>
</form>
</div>
</div>
<div class="tab-pane" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">Register form</div>
</div>
Right now, the tabs are in a white color along with the borders but I would like to override the styling so when I switch tabs, the active tabs has the underline border-bottom.
How do I overwrite the styling ?

Answer 1

You should not mess/overwrite frameworks own css, just simply add a custom css class on every .tab-pane div, for example: .custom-tab and add some css in your css file like this
.custom-tab.active {
background: transparent !important;
color: white !important;
border-bottom: 2px solid yellow !important;
border-radius: 0px !important;
}