bootstrap- how to change nav tab active to underline?

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'))
                                            <a href="{{ route('password.request') }}">Forgot Password?</a>
                                            @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 
                                                <a href="#">terms and conditions.</a>
                                            </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;
}