Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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.
This is my code:
<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>
A few lines of css is needed. like
.nav-link.active{
color: yellow;
background-color:none; //or use the same colour.
border-color:none;
border-bottom: 3px solid yellow;
}
you can change the colour as you want and add more properties if you want.
I think it's not suggested to overwrite the bootstrap classes.
we can. add a custom class name and put your code there.
where should i call the custom class at?
Along with the nav-link class
Please or to participate in this conversation.