How can I alter the appearance of the active nav tab in Bootstrap to display an underline?

I am currently utilizing the Bootstrap active tab pane, and it is displayed as shown below:

https://i.sstatic.net/FJ4lt.png

However, I want to customize it to look like this:

https://i.sstatic.net/BUWpK.png

Specifically, I aim to have the active tab underlined in yellow.

Here's my navigation tab setup:

<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">
                      [Content here]
                  </div>
                    <div class="tab-pane" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">Register form</div>
                </div>

Currently, the tabs are styled in white with borders. However, I would like to override this styling so that when switching between tabs, the active one displays an underline border at the bottom.

How can I achieve this custom styling?

cssbootstrap-4

Answer №1

To avoid interfering with the framework's own CSS, it is recommended to refrain from altering it directly. Instead, consider adding a custom CSS class to each .tab-pane div. For example, you could use .custom-tab and define the following styles in your CSS file:

.custom-tab.active {
    background: transparent !important;
    color: white !important;
    border-bottom: 2px solid yellow !important;
    border-radius: 0px !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Frequently Asked Questions about Bootstrap Navbars

I designed my NavBar to look a certain way, but I have some inquiries regarding it. https://i.sstatic.net/4nypZ.png This is the code for NavMenu.razor: <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class=" ...

bootstrap-4bootstrap-5

What is the best way to toggle the class "Active" when clicking on an li element, while removing it from the other elements simultaneously?

I am currently working on creating a dynamic menu where I need to alter the CSS of an li element when it is clicked, while keeping the CSS of the other li elements unchanged. Here is my menu structure: <ul id="menu"> <li><a href="# ...

jquerycss

Circular center button in the footer UI

Struggling with aligning a button in the footer perfectly? I have two icons on each side and while the UI is almost there, something seems off with the center icon's padding and shadow. I'm currently working with material-ui. Take a look at the i ...

htmlcssreactjsangularjsmaterial-ui

Apply CSS to every other div using a CSS selector

Struggling with selecting specific divs in CSS. Snippet of my code: <div class="card"> <div class="test">Asdasdasd</div> </div> <div class="card"> <div class="test">Asdasdasd</div> </div> <div class= ...

htmlcsscss-selectors

Is the element refusing to adhere for some mysterious cause?

Hello, I've been attempting to create a navigation bar using the position:sticky property, but for some reason, it's not sticking. I've scoured the internet for solutions, but couldn't find a fix, so here I am seeking help. /*variabl ...

htmlcss

Move the entire <div> element that contains only text using two control arrows

After building a website with Bootstrap, I am looking to include a slider that will transition a <div> containing text only, no images. I would also like this slider to feature controls in the form of arrows. Can anyone recommend a suitable slider ...

twitter-bootstrapbootstrap-4slider

Ionic - Landscape Mode Causing Alignment Distortion

I'm currently working on designing a grid-based image display for an Ionic Mobile App. One of the main challenges I'm facing is adjusting the heights of the images based on the screen size. I want to set a maximum height for both portrait and lan ...

htmlcssangularjsgridviewionic-framework

How can content be kept from dropping below a stationary header?

One thing I've noticed when creating a fixed header is that I often resort to using padding in order to push the content back into view if it falls below the header. Is there a way to create a fixed header without relying on padding or margin to keep ...

htmlcss

Is there a way to dynamically count the length of an element or class in realtime using JavaScript?

If there are currently 5 divs with the class name "item" and a new unknown number of divs with the same class name "item" are dynamically added in real time, I want my result to display the total number of divs present at that moment (i.e., 5 + n). Note: ...

javascriptjqueryhtmlcss

The scaling of the slick carousel image is not working as expected

Having an issue with the Slick carousel where images are not resizing based on browser size (original size is 300x228px). Just to clarify: When I shrink the browser window, the number of slides decreases but the images remain the same size. I've bee ...

javascripthtmlcssslick.js

Seeking assistance with implementing Styles using the .css() function in Jquery. Any guidance is appreciated

This particular style is exactly what I am looking for. body{ background: url("img/Background_Home.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

jquerycssbackground

Attempting to display divs at the bottom when hovering over menu options

I need help troubleshooting my HTML and CSS code. I want to be able to hover over a menu item and have the corresponding div appear at the bottom. Can you point out what's wrong with my code? <!DOCTYPE html> <html> <head> &l ...

htmlcss

Blurry Background CSS Effect

Is there a way to create a background image with the same blurry effect as seen in the picture provided? It appears to involve multiple filters rather than just a basic blur. I attempted using the blur Effect, but it didn't achieve the desired result ...

cssimagebackgroundblureffect

What is the best way to exchange configuration data among Javascript, Python, and CSS within my Django application?

How can I efficiently configure Javascript, Django templates, Python code, and CSS that all rely on the same data? For example, let's say I have a browser-side entry widget written in Javascript that interacts with an embedded Java app. Once the user ...

javascriptpythoncssdjangodata-sharing

When an image is a child of the parent content and another element has opacity set, the CSS stack order will be altered

Recently, I came across an interesting issue while working with CSS, particularly with negative margins to stack elements on top of each other. I am aware of the natural stack order in which elements overlap, where the later element always appears on top ...

csscss-positionz-index

The wonders of jQuery popup windows

A code was discovered that displays a popup, but it currently relies on transparency (opacity: 0). I would like to modify it to use display: none instead, as the transparent window in the center of my website is causing issues. Here is the JavaScript code ...

javascriptphpjquerycss

Achieving a horizontal alignment of Bootstrap cards using ReactJS

I have been utilizing Bootstrap 4 to present data to the user. Now, I am considering displaying the data in columns and rows. The frontend is built with ReactJS and it retrieves data from the backend response. Currently, I have successfully displayed the ...

reactjstwitter-bootstrapbootstrap-4react-bootstrap

Is there a way to align the image next to the form and ensure they are both the same size?

I've been struggling to resize the image to match the form size, but I can't seem to get it right. Can anyone provide me with some guidance on this issue? I have obtained this contact form from a website that I plan to modify slightly, but I need ...

javascripthtmlcss

Navigation Menu Spanning Across Full Width of All Screens

Hello! I am currently working on designing a responsive menu using HTML5 and CSS. My approach involves creating a navigation menu for desktop computers and implementing a checkbox with a label to reveal the responsive menu when needed. Here is the code s ...

csshtml

Applying CSS to align the first line to the left and right, while ensuring that wrapped lines are aligned to the

Struggling with CSS to align drink names and descriptions on a bar's menu. Want the name left aligned and the description right aligned, even if wrapped lines are also right aligned. Current progress can be seen at http://jsfiddle.net/H96XQ/ CSS: . ...

htmlcss